<!DOCTYPE html>
<html lang="en">
  <head>
    
      <title>Gradio Docs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Browse Gradio Documentation and Examples">
<meta name="author" content="Gradio Team">
<meta property="og:title" content="Gradio Docs">
<meta property="og:type" content="website">
<meta property="og:url" content="https://gradio.app/docs">
<meta property="og:description" content="Browse Gradio Documentation and Examples">
<meta property="og:image" content="/assets/img/meta-image.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@Gradio">
<meta name="twitter:title" content="Gradio Docs">
<meta name="twitter:description" content="Browse Gradio Documentation and Examples.">
<meta name="twitter:image" content="/assets/img/meta-image.png">

<link rel="icon" type="image/png" href="/assets/img/logo.png">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/assets/prism.css">
<link
    href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
    rel="stylesheet" />

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-156449732-1');
</script>
    
    <link rel="stylesheet" href="/style.css">
    <link rel="stylesheet" href="/assets/prism.css">
  </head>
  <body>
    <div class="container mx-auto flex flex-wrap justify-between flex-row relative items-center px-4 py-5 gap-6 text-lg z-50">
      <div class="flex flex-row items-center">
      <a href="/">
        <img src="/assets/gradio.svg">
      </a>

      <div class="pl-2 pr-1 py-1 w-fit text-gray-600 font-semibold">
        <select id="toggle" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);" class="form-select appearance-none block px-3 text-base font-normal text-gray-700 bg-white bg-clip-padding bg-no-repeat border border-solid border-gray-300 rounded-full transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none w-max" style="width: 135%; padding-top: 0.125rem; padding-bottom: 0.125rem">
            <option value="/docs" selected>
              v3.9
            </option>
            <option value="/docs/main" >
              main
            </option>
        </select>
      </div>

    </div>

      <svg class="h-8 w-8 lg:hidden" viewBox="-10 -10 20 20" onclick="document.querySelector(&quot;nav&quot;).classList.toggle(&quot;hidden&quot;),document.querySelector(&quot;nav&quot;).classList.toggle(&quot;flex&quot;)">
        <rect x="-7" y="-6" width="14" height="2"></rect>
        <rect x="-7" y="-1" width="14" height="2"></rect>
        <rect x="-7" y="4" width="14" height="2"></rect>
      </svg>
      <nav class="hidden w-full flex-col gap-3 lg:flex lg:w-auto lg:flex-row lg:gap-8">
        <a class="thin-link flex items-center gap-3" href="/getting_started"><span>⚡</span> <span>Quickstart</span>
        </a>
        <a class="thin-link flex items-center gap-3" href="/docs"><span>✍️</span> <span>Docs</span>
        </a>
        <a class="thin-link flex items-center gap-3" href="/guides"><span>💡</span> <span>Guides</span></a>
        <a class="thin-link flex items-center gap-3" href="/demos"><span>🎢</span> <span>Demos</span></a>
        <div class="group relative flex cursor-pointer items-center gap-3" onclick="document.querySelector(&quot;.help-menu&quot;).classList.toggle(&quot;flex&quot;),document.querySelector(&quot;.help-menu&quot;).classList.toggle(&quot;hidden&quot;)">
          <span>🖐</span> <span>Community</span>
          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
          </svg>
          <div class="help-menu absolute top-6 hidden w-52 flex-col bg-white shadow group-hover:flex sm:right-0">
            <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" href="https://github.com/gradio-app/gradio/issues/new/choose" target="_blank">File an Issue</a>
            <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" href="https://discuss.huggingface.co/c/gradio/26" target="_blank">Discuss</a>
            <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" target="_blank" href="https://discord.gg/feTf9x3ZSB">Discord</a>
            <a class="thin-link inline-block px-4 py-2 hover:bg-gray-100" target="_blank" href="https://gradio.curated.co/">Newsletter</a>
          </div>
        </div>
        <a class="thin-link flex items-center gap-3" href="https://github.com/gradio-app/gradio">
        <img src="/assets/img/github-black.svg" class="w-6">
        </a>
      </nav>
    </div>

    <!-- <script>
      document.getElementById("toggle").onchange = changeListener;
      
      function changeListener(){
      
      var value = this.value  
      console.log(value);      
      if (value == "main") {
        
      } else if (value == "v3.9" ) {
        document.querySelector('#main-docs').classList.add('hidden'); 
        document.querySelector('#pip-docs').classList.remove('hidden');
      }
        
    };
    
    </script> -->
  
  <main class="container mx-auto px-4 flex gap-4">
    <div class="navigation pb-4 h-screen leading-relaxed sticky top-0 text-md overflow-y-auto hidden lg:block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip"
          style="min-width: 20%">
      <div class="w-full sticky top-0 bg-gradient-to-r from-white to-gray-50 z-10">
      <input id="search"
             type="search"
             class="w-4/5 m-4 rounded-md border-gray-200 focus:placeholder-transparent focus:shadow-none focus:border-orange-500 focus:ring-0"
             placeholder="Search ⌘-k / ctrl-k"
             autocomplete="off"
             onkeyup="search(this.value);"
             onsearch="search(this.value);"/>
      </div>
      <a class="link current-nav-link px-4 mb-2 block" href="#building_demos">Building Demos</a>
      <a class="thin-link px-4 block" href="#interface">Interface</a>
      <div class="sub-links hidden" hash="#interface">
      
        
          
            <a class="thinner-link px-4 pl-8 block" href="#launch">launch</a>
          
            <a class="thinner-link px-4 pl-8 block" href="#load">load</a>
          
            <a class="thinner-link px-4 pl-8 block" href="#from_pipeline">from_pipeline</a>
          
            <a class="thinner-link px-4 pl-8 block" href="#integrate">integrate</a>
          
            <a class="thinner-link px-4 pl-8 block" href="#queue">queue</a>
          
        
      
      </div>
      <a class="thin-link px-4 block" href="#flagging">Flagging</a>
      <div class="sub-links hidden" hash="#flagging">
      
        
          <a class="thinner-link px-4 pl-8 block" href="#simplecsvlogger">SimpleCSVLogger</a>
        
      
        
          <a class="thinner-link px-4 pl-8 block" href="#csvlogger">CSVLogger</a>
        
      
        
          <a class="thinner-link px-4 pl-8 block" href="#huggingfacedatasetsaver">HuggingFaceDatasetSaver</a>
        
      
      </div>
      <a class="thin-link px-4 block" href="#combining-interfaces">Combining Interfaces</a>
      <div class="sub-links hidden" hash="#combining-interfaces">
          <a class="thinner-link px-4 pl-8 block" href="#tabbedinterface">TabbedInterface</a>
          <a class="thinner-link px-4 pl-8 block" href="#parallel">Parallel</a>
          <a class="thinner-link px-4 pl-8 block" href="#series">Series</a>
      </div>
      <a class="thin-link px-4 block" href="#blocks">Blocks<sup class="text-orange-500">NEW</sup></a>
      <div class="sub-links hidden" hash="#blocks">
          
            
              
                <a class="thinner-link px-4 pl-8 block" href="#load">load</a>
              
            
          
      </div>
      <a class="thin-link px-4 block" href="#block-layouts">Block Layouts</a>
      <div class="sub-links hidden" hash="#block-layouts">
          
            
              <a class="thinner-link px-4 pl-8 block" href="#row">Row</a>
            
          
            
              <a class="thinner-link px-4 pl-8 block" href="#column">Column</a>
            
          
            
              <a class="thinner-link px-4 pl-8 block" href="#tab">Tab</a>
            
          
            
              <a class="thinner-link px-4 pl-8 block" href="#box">Box</a>
            
          
            
              <a class="thinner-link px-4 pl-8 block" href="#accordion">Accordion</a>
            
          
      </div>
      <a class="link px-4 my-2 block" href="#components">Components</a>
      
        <a class="px-4 block thin-link" href="#textbox">Textbox</a>
      
        <a class="px-4 block thin-link" href="#number">Number</a>
      
        <a class="px-4 block thin-link" href="#slider">Slider</a>
      
        <a class="px-4 block thin-link" href="#checkbox">Checkbox</a>
      
        <a class="px-4 block thin-link" href="#checkboxgroup">CheckboxGroup</a>
      
        <a class="px-4 block thin-link" href="#radio">Radio</a>
      
        <a class="px-4 block thin-link" href="#dropdown">Dropdown</a>
      
        <a class="px-4 block thin-link" href="#image">Image</a>
      
        <a class="px-4 block thin-link" href="#video">Video</a>
      
        <a class="px-4 block thin-link" href="#audio">Audio</a>
      
        <a class="px-4 block thin-link" href="#file">File</a>
      
        <a class="px-4 block thin-link" href="#dataframe">Dataframe</a>
      
        <a class="px-4 block thin-link" href="#timeseries">Timeseries</a>
      
        <a class="px-4 block thin-link" href="#state">State</a>
      
        <a class="px-4 block thin-link" href="#button">Button</a>
      
        <a class="px-4 block thin-link" href="#colorpicker">ColorPicker</a>
      
        <a class="px-4 block thin-link" href="#label">Label</a>
      
        <a class="px-4 block thin-link" href="#highlightedtext">HighlightedText</a>
      
        <a class="px-4 block thin-link" href="#json">JSON</a>
      
        <a class="px-4 block thin-link" href="#html">HTML</a>
      
        <a class="px-4 block thin-link" href="#gallery">Gallery</a>
      
        <a class="px-4 block thin-link" href="#chatbot">Chatbot</a>
      
        <a class="px-4 block thin-link" href="#model3d">Model3D</a>
      
        <a class="px-4 block thin-link" href="#plot">Plot</a>
      
        <a class="px-4 block thin-link" href="#markdown">Markdown</a>
      
        <a class="px-4 block thin-link" href="#dataset">Dataset</a>
      
        <a class="px-4 block thin-link" href="#interpretation">Interpretation</a>
      
      <a class="link px-4 my-2 block" href="#component-helpers">Component Helpers
      
        <a class="px-4 block thin-link" href="#examples">Examples</a>
      
      <a class="thin-link px-4 block" href="#update">Update</a>
      <a class="link px-4 my-2 block" href="#routes">Routes
        
          <a class="px-4 block thin-link" href="#mount_gradio_app">mount_gradio_app</a>
        
    </div>
    <div class="flex flex-col">
      <div>
        <p class="bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-1 mr-2 rounded-full text-orange-800 mb-1 w-fit float-left">
                    New to Gradio? Start here: <a class="link" href="/getting_started">Getting Started</a>
        </p>
        <p class="bg-gradient-to-r from-green-100 to-green-50 border border-green-200 px-4 py-1 rounded-full text-green-800 mb-1 w-fit float-left sm:float-right">
          See the <a class="link" href="/changelog">Release History</a>
        </p>
      </div>
      
      <section id="building_demos" class="pt-2 flex flex-col gap-10 mb-8">
        <section class="pt-2">
          <h2 class="text-4xl font-light mb-2 pt-2 text-orange-500" id="building-demos">Building Demos</h2>
          
            <div class="obj" id="interface">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="hello_world"
          onclick="show_demo('interface', 'hello_world')"

        >hello_world</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="hello_world_3"
          onclick="show_demo('interface', 'hello_world_3')"

        >hello_world_3</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="gpt_j"
          onclick="show_demo('interface', 'gpt_j')"

        >gpt_j</button>
        
      </div>
      
      <div class="demo-content " name="hello_world">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
    
demo.launch()   </code></pre></div>
        
          <gradio-app space="gradio/hello_world" />      
        
      </div>
      
      <div class="demo-content hidden" name="hello_world_3">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def greet(name, is_morning, temperature):
    salutation = "Good morning" if is_morning else "Good evening"
    greeting = f"{salutation} {name}. It is {temperature} degrees today"
    celsius = (temperature - 32) * 5 / 9
    return greeting, round(celsius, 2)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "checkbox", gr.Slider(0, 100)],
    outputs=["text", "number"],
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/hello_world_3" />      
        
      </div>
      
      <div class="demo-content hidden" name="gpt_j">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

title = "GPT-J-6B"

examples = [
    ["The tower is 324 metres (1,063 ft) tall,"],
    ["The Moon's orbit around Earth has"],
    ["The smooth Borealis basin in the Northern Hemisphere covers 40%"],
]

demo = gr.Interface.load(
    "huggingface/EleutherAI/gpt-j-6B",
    inputs=gr.Textbox(lines=5, max_lines=6, label="Input Text"),
    title=title,
    examples=examples,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/gpt_j" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="interface-header"
        class="text-3xl font-light py-4">Interface</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Interface(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Interface is Gradio's main high-level class, and allows you to create a web-based GUI / demo around a machine learning model (or any Python function) in a few lines of code. You must specify three parameters: (1) the function to create a GUI for (2) the desired input components and (3) the desired output components. Additional parameters can be used to control the appearance and behavior of the demo. <br></p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr

def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}

demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label")
demo.launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Optional[str | Component | List[str | Component]]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of input components should match the number of parameters in fn. If set to None, then only the output components will be displayed.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Optional[str | Component | List[str | Component]]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a single Gradio component, or list of Gradio components. Components can either be passed as instantiated objects, or referred to by their string shortcuts. The number of output components should match the number of values returned by fn. If set to None, then only the input components will be displayed.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                examples
              </code>
              <p class="text-gray-500 italic">Optional[List[Any] | List[List[Any]] | str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>sample inputs for the function; if provided, appear below the UI components and can be clicked to populate the interface. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cache_examples
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, caches examples in the server for fast runtime in examples. The default option in HuggingFace Spaces is True. The default option elsewhere is False.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                examples_per_page
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 10</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If examples are provided, how many to display per page.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                live
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether the interface should automatically rerun if any of the inputs change.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interpretation
              </code>
              <p class="text-gray-500 italic">Optional[Callable | str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>function that provides interpretation explaining prediction output. Pass "default" to use simple built-in interpreter, "shap" to use a built-in shapley-based interpreter, or your own custom interpretation function. For more information on the different interpretation methods, see the Advanced Interface Features guide.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                num_shap
              </code>
              <p class="text-gray-500 italic">float</p>
              
              <p class="text-gray-500 font-semibold">default: 2.0</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a multiplier that determines how many examples are computed for shap-based interpretation. Increasing this value will increase shap runtime, but improve results. Only applies if interpretation is "shap".</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                title
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a title for the interface; if provided, appears above the input and output components in large font. Also used as the tab title when opened in a browser window.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                description
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a description for the interface; if provided, appears above the input and output components and beneath the title in regular font. Accepts Markdown and HTML content.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                article
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>an expanded article explaining the interface; if provided, appears below the input and output components in regular font. Accepts Markdown and HTML content.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                thumbnail
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>path or url to image to use as display image when the web demo is shared on social media.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                theme
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Theme to use - right now, only "default" is supported. Can be set with the GRADIO_THEME environment variable.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                css
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>custom css or path to custom css file to use with interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                allow_flagging
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>one of "never", "auto", or "manual". If "never" or "auto", users will not see a button to flag an input and output. If "manual", users will see a button to flag. If "auto", every prediction will be automatically flagged. If "manual", samples are flagged when the user clicks flag button. Can be set with environmental variable GRADIO_ALLOW_FLAGGING; otherwise defaults to "manual".</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                flagging_options
              </code>
              <p class="text-gray-500 italic">List[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if provided, allows user to select from the list of options when flagging. Only applies if allow_flagging is "manual".</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                flagging_dir
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "flagged"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>what to name the directory where flagged data is stored.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                flagging_callback
              </code>
              <p class="text-gray-500 italic">FlaggingCallback</p>
              
              <p class="text-gray-500 font-semibold">default: CSVLogger()</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An instance of a subclass of FlaggingCallback which will be called when a sample is flagged. By default logs to a local CSV file.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                analytics_enabled
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable if defined, or default to True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="launch">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="launch-header"
        class="text-3xl font-light py-4">launch</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Interface.<span>launch(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Launches a simple web server that serves the demo. Can also be used to create a public link used by anyone to access the demo from their browser by setting share=True. <br></p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
def reverse(text):
    return text[::-1]
demo = gr.Interface(reverse, "text", "text")
demo.launch(share=True, auth=("username", "password"))</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inline
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to display in the interface inline in an iframe. Defaults to True in python notebooks; False otherwise.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inbrowser
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to automatically launch the interface in a new tab on the default browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                share
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to create a publicly shareable link for the interface. Creates an SSH tunnel to make your UI accessible from anywhere. If not provided, it is set to False by default every time, except when running in Google Colab. When localhost is not accessible (e.g. Google Colab), setting share=False is not supported.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                debug
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, blocks the main thread from running. If running in Google Colab, this is needed to print the errors in the cell output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                enable_queue
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>DEPRECATED (use .queue() method instead.) if True, inference requests will be served through a queue instead of with parallel threads. Required for longer inference times (> 1min) to prevent timeout. The default option in HuggingFace Spaces is True. The default option elsewhere is False.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_threads
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 40</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>allow up to `max_threads` to be processed in parallel. The default is inherited from the starlette library (currently 40).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                auth
              </code>
              <p class="text-gray-500 italic">Optional[Callable | Tuple[str, str] | List[Tuple[str, str]]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If provided, username and password (or list of username-password tuples) required to access interface. Can also provide function that takes username and password and returns True if valid login.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                auth_message
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If provided, HTML message provided on login page.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                prevent_thread_lock
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, the interface will block the main thread while the server is running.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_error
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, any errors in the interface will be displayed in an alert modal and printed in the browser console log</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                server_name
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME. If None, will use "127.0.0.1".</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                server_port
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>will start gradio app on this port (if available). Can be set by environment variable GRADIO_SERVER_PORT. If None, will search for an available port starting at 7860.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_tips
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will occasionally show tips about new Gradio features</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                height
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 500</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The height in pixels of the iframe element containing the interface (used if inline=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                width
              </code>
              <p class="text-gray-500 italic">int | str</p>
              
              <p class="text-gray-500 font-semibold">default: "100%"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The width in pixels of the iframe element containing the interface (used if inline=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                encrypt
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, flagged data will be encrypted by key provided by creator at launch</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                favicon_path
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If a path to a file (.png, .gif, or .ico) is provided, it will be used as the favicon for the web page.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                ssl_keyfile
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If a path to a file is provided, will use this as the private key file to create a local server running on https.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                ssl_certfile
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If a path to a file is provided, will use this as the signed certificate for https. Needs to be provided if ssl_keyfile is provided.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                ssl_keyfile_password
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If a password is provided, will use this with the ssl certificate for https.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                quiet
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, suppresses most print statements.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_api
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, shows the api docs in the footer of the app. Default True. If the queue is enabled, then api_open parameter of .queue() will determine if the api docs are shown, independent of the value of show_api.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="load">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="load-header"
        class="text-3xl font-light py-4">load</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Interface.<span>load(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Class method that constructs an Interface from a Hugging Face repo. Can accept model repos (if src is "models") or Space repos (if src is "spaces"). The input and output components are automatically loaded from the repo.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
description = "Story generation with GPT"
examples = [["An adventurer is approached by a mysterious stranger in the tavern for a new quest."]]
demo = gr.Interface.load("models/EleutherAI/gpt-neo-1.3B", description=description, examples=examples)
demo.launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                name
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the name of the model (e.g. "gpt2" or "facebook/bart-base") or space (e.g. "flax-community/spanish-gpt2"), can include the `src` as prefix (e.g. "models/facebook/bart-base")</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                src
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the source of the model: `models` or `spaces` (or leave empty if source is provided as a prefix in `name`)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_key
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>optional access token for loading private Hugging Face Hub models or spaces. Find your token here: https://huggingface.co/settings/tokens</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                alias
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>optional string used as the name of the loaded model instead of the default name (only applies if loading a Space running Gradio 2.x)</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="from_pipeline">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="from_pipeline-header"
        class="text-3xl font-light py-4">from_pipeline</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Interface.<span>from_pipeline(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Class method that constructs an Interface from a Hugging Face transformers.Pipeline object. The input and output components are automatically determined from the pipeline.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
from transformers import pipeline
pipe = pipeline("image-classification")
gr.Interface.from_pipeline(pipe).launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                pipeline
              </code>
              <p class="text-gray-500 italic">transformers.Pipeline</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the pipeline object to use.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="integrate">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="integrate-header"
        class="text-3xl font-light py-4">integrate</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Interface.<span>integrate(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">A catch-all method for integrating with other libraries. This method should be run after launch()</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                comet_ml
              </code>
              <p class="text-gray-500 italic">comet_ml.Experiment</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If a comet_ml Experiment object is provided, will integrate with the experiment and appear on Comet dashboard</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                wandb
              </code>
              <p class="text-gray-500 italic">ModuleType('wandb')</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If the wandb module is provided, will integrate with it and appear on WandB dashboard</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                mlflow
              </code>
              <p class="text-gray-500 italic">ModuleType('mlflow')</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If the mlflow module  is provided, will integrate with the experiment and appear on ML Flow dashboard</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="queue">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="queue-header"
        class="text-3xl font-light py-4">queue</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Interface.<span>queue(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">You can control the rate of processed requests by creating a queue. This will allow you to set the number of requests to be processed at one time, and will let users know their position in the queue.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">demo = gr.Interface(gr.Textbox(), gr.Image(), image_generator)
demo.queue(concurrency_count=3)
demo.launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                concurrency_count
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 1</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Number of worker threads that will be processing requests concurrently.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_update_rate
              </code>
              <p class="text-gray-500 italic">float | str</p>
              
              <p class="text-gray-500 font-semibold">default: "auto"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If "auto", Queue will send status estimations to all clients whenever a job is finished. Otherwise Queue will send status at regular intervals set by this parameter as the number of seconds.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                client_position_to_load_data
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 30</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Once a client's position in Queue is less that this value, the Queue will collect the input data from the client. You may make this smaller if clients can send large volumes of data, such as video, since the queued data is stored in memory.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                default_enabled
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, all event listeners will use queueing by default.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_open
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, the REST routes of the backend will be open, allowing requests made directly to those endpoints to skip the queue.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_size
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The maximum number of events the queue will store at any given moment.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/quickstart">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Quickstart</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/key_features">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Key Features</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/sharing_your_app">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Sharing Your App</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/interface_state">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Interface State</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/reactive_interfaces">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Reactive Interfaces</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/advanced_interface_features">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Advanced Interface Features</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        </section>
        <section id="flagging" class="pt-2">
          <h3 class="text-4xl font-light my-4" id="flagging">Flagging</h3>
          <p class="mt-8 mb-12 text-lg">
            A Gradio Interface includes a "Flag" button that appears 
            underneath the output. By default, clicking on the Flag button sends the input and output
            data back to the machine where the gradio demo is running, and saves it to a CSV log file.
            But this default behavior can be changed. To set what happens when the Flag button is clicked, 
            you pass an instance of a subclass of <em>FlaggingCallback</em> to the <em>flagging_callback</em> parameter 
            in the <em>Interface</em> constructor. You can use one of the <em>FlaggingCallback</em> subclasses 
            that are listed below, or you can create your own, which lets you do whatever 
            you want with the data that is being flagged.
          </p>
  
          <div class="flex flex-col gap-10">
          
            
              <div class="obj" id="simplecsvlogger">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="simplecsvlogger-header"
        class="text-3xl font-light py-4">SimpleCSVLogger</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>SimpleCSVLogger(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">A simplified implementation of the FlaggingCallback abstract class provided for illustrative purposes.  Each flagged sample (both the input and output data) is logged to a CSV file on the machine running the gradio app.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
                    flagging_callback=SimpleCSVLogger())</code></pre>
    </div>
  

  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">SimpleCSVLogger</span></p>
      
  
</div>
            
          
            
              <div class="obj" id="csvlogger">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="csvlogger-header"
        class="text-3xl font-light py-4">CSVLogger</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>CSVLogger(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">The default implementation of the FlaggingCallback abstract class. Each flagged sample (both the input and output data) is logged to a CSV file with headers on the machine running the gradio app.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
                    flagging_callback=CSVLogger())</code></pre>
    </div>
  

  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/using_flagging">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Using Flagging</p>
            </div>
          </a>
          
        </div>
      
  
</div>
            
          
            
              <div class="obj" id="huggingfacedatasetsaver">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="huggingfacedatasetsaver-header"
        class="text-3xl font-light py-4">HuggingFaceDatasetSaver</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>HuggingFaceDatasetSaver(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">A callback that saves each flagged sample (both the input and output data) to a HuggingFace dataset.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
hf_writer = gr.HuggingFaceDatasetSaver(HF_API_TOKEN, "image-classification-mistakes")
def image_classifier(inp):
    return {'cat': 0.3, 'dog': 0.7}
demo = gr.Interface(fn=image_classifier, inputs="image", outputs="label",
                    allow_flagging="manual", flagging_callback=hf_writer)</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                hf_token
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The HuggingFace token to use to create (and write the flagged sample to) the HuggingFace dataset.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                dataset_name
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The name of the dataset to save the data to, e.g. "image-classifier-1"</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                organization
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The organization to save the dataset under. The hf_token must provide write access to this organization. If not provided, saved under the name of the user corresponding to the hf_token.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                private
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Whether the dataset should be private (defaults to False).</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/using_flagging">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Using Flagging</p>
            </div>
          </a>
          
        </div>
      
  
</div>
            
          
          </div>
      </section>
  
        <section id="combining-interfaces" class="pt-2">
          <h3 class="text-4xl font-light my-4">Combining Interfaces</h3>
          <p class="mt-8 mb-12 text-lg">
            Once you have created several Interfaces, we provide several classes that let you
            start combining them together. For example, you can chain them in <em>Series</em>
            or compare their outputs in <em>Parallel</em> if the inputs and outputs match accordingly.
            You can also display arbitrary Interfaces together in a tabbed layout using <em>TabbedInterface</em>.
          </p>
          
          <div class="flex flex-col gap-10">
            
              <div class="obj" id="tabbedinterface">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="stt_or_tts"
          onclick="show_demo('tabbedinterface', 'stt_or_tts')"

        >stt_or_tts</button>
        
      </div>
      
      <div class="demo-content " name="stt_or_tts">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

title = "GPT-J-6B"

tts_examples = [
    "I love learning machine learning",
    "How do you do?",
]

tts_demo = gr.Interface.load(
    "huggingface/facebook/fastspeech2-en-ljspeech",
    title=None,
    examples=tts_examples,
    description="Give me something to say!",
)

stt_demo = gr.Interface.load(
    "huggingface/facebook/wav2vec2-base-960h",
    title=None,
    inputs="mic",
    description="Let me try to guess what you're saying!",
)

demo = gr.TabbedInterface([tts_demo, stt_demo], ["Text-to-speech", "Speech-to-text"])

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/stt_or_tts" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="tabbedinterface-header"
        class="text-3xl font-light py-4">TabbedInterface</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>TabbedInterface(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">A TabbedInterface is created by providing a list of Interfaces, each of which gets rendered in a separate tab.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interface_list
              </code>
              <p class="text-gray-500 italic">List[Interface]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a list of interfaces to be rendered in tabs.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                tab_names
              </code>
              <p class="text-gray-500 italic">Optional[List[str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a list of tab names. If None, the tab names will be "Tab 1", "Tab 2", etc.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                theme
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "default"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>which theme to use - right now, only "default" is supported.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                analytics_enabled
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                css
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>custom css or path to custom css file to apply to entire Blocks</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
            
            
              <div class="obj" id="parallel">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="interface_parallel"
          onclick="show_demo('parallel', 'interface_parallel')"

        >interface_parallel</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="interface_parallel_load"
          onclick="show_demo('parallel', 'interface_parallel_load')"

        >interface_parallel_load</button>
        
      </div>
      
      <div class="demo-content " name="interface_parallel">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

greeter_1 = gr.Interface(lambda name: f"Hello {name}!", inputs="textbox", outputs=gr.Textbox(label="Greeter 1"))
greeter_2 = gr.Interface(lambda name: f"Greetings {name}!", inputs="textbox", outputs=gr.Textbox(label="Greeter 2"))
demo = gr.Parallel(greeter_1, greeter_2)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/interface_parallel" />      
        
      </div>
      
      <div class="demo-content hidden" name="interface_parallel_load">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

generator1 = gr.Interface.load("huggingface/gpt2")
generator2 = gr.Interface.load("huggingface/EleutherAI/gpt-neo-2.7B")
generator3 = gr.Interface.load("huggingface/EleutherAI/gpt-j-6B")

demo = gr.Parallel(generator1, generator2, generator3)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/interface_parallel_load" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="parallel-header"
        class="text-3xl font-light py-4">Parallel</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Parallel(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Creates a new Interface consisting of multiple Interfaces in parallel (comparing their outputs). The Interfaces to put in Parallel must share the same input components (but can have different output components). <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interfaces
              </code>
              <p class="text-gray-500 italic"><class 'gradio.interface.Interface'></p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>any number of Interface objects that are to be compared in parallel</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                options
              </code>
              <p class="text-gray-500 italic"><class 'inspect._empty'></p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>additional kwargs that are passed into the new Interface object to customize it</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/advanced_interface_features">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Advanced Interface Features</p>
            </div>
          </a>
          
        </div>
      
  
</div>
            
            
              <div class="obj" id="series">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="interface_series"
          onclick="show_demo('series', 'interface_series')"

        >interface_series</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="interface_series_load"
          onclick="show_demo('series', 'interface_series_load')"

        >interface_series_load</button>
        
      </div>
      
      <div class="demo-content " name="interface_series">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

get_name = gr.Interface(lambda name: name, inputs="textbox", outputs="textbox")
prepend_hello = gr.Interface(lambda name: f"Hello {name}!", inputs="textbox", outputs="textbox")
append_nice = gr.Interface(lambda greeting: f"{greeting} Nice to meet you!",
                           inputs="textbox", outputs=gr.Textbox(label="Greeting"))
demo = gr.Series(get_name, prepend_hello, append_nice)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/interface_series" />      
        
      </div>
      
      <div class="demo-content hidden" name="interface_series_load">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

generator = gr.Interface.load("huggingface/gpt2")
translator = gr.Interface.load("huggingface/t5-small")

demo = gr.Series(generator, translator)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/interface_series_load" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="series-header"
        class="text-3xl font-light py-4">Series</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Series(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Creates a new Interface from multiple Interfaces in series (the output of one is fed as the input to the next, and so the input and output components must agree between the interfaces). <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interfaces
              </code>
              <p class="text-gray-500 italic"><class 'gradio.interface.Interface'></p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>any number of Interface objects that are to be connected in series</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                options
              </code>
              <p class="text-gray-500 italic"><class 'inspect._empty'></p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>additional kwargs that are passed into the new Interface object to customize it</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/advanced_interface_features">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Advanced Interface Features</p>
            </div>
          </a>
          
        </div>
      
  
</div>
            
          </div>
        </section>
        <section id="blocks" class="pt-2 mb-8">
          <div class="flex flex-col gap-10">
            
              <div class="obj" id="blocks">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_hello"
          onclick="show_demo('blocks', 'blocks_hello')"

        >blocks_hello</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_flipper"
          onclick="show_demo('blocks', 'blocks_flipper')"

        >blocks_flipper</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_speech_text_sentiment"
          onclick="show_demo('blocks', 'blocks_speech_text_sentiment')"

        >blocks_speech_text_sentiment</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="generate_english_german"
          onclick="show_demo('blocks', 'generate_english_german')"

        >generate_english_german</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sound_alert"
          onclick="show_demo('blocks', 'sound_alert')"

        >sound_alert</button>
        
      </div>
      
      <div class="demo-content " name="blocks_hello">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/blocks_hello" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_flipper">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import numpy as np
import gradio as gr

def flip_text(x):
    return x[::-1]

def flip_image(x):
    return np.fliplr(x)

with gr.Blocks() as demo:
    gr.Markdown("Flip text or image files using this demo.")
    with gr.Tab("Flip Text"):
        text_input = gr.Textbox()
        text_output = gr.Textbox()
        text_button = gr.Button("Flip")
    with gr.Tab("Flip Image"):
        with gr.Row():
            image_input = gr.Image()
            image_output = gr.Image()
        image_button = gr.Button("Flip")

    with gr.Accordion("Open for More!"):
        gr.Markdown("Look at me...")

    text_button.click(flip_text, inputs=text_input, outputs=text_output)
    image_button.click(flip_image, inputs=image_input, outputs=image_output)
    
if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/blocks_flipper" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_speech_text_sentiment">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from transformers import pipeline

import gradio as gr

asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")


def speech_to_text(speech):
    text = asr(speech)["text"]
    return text


def text_to_sentiment(text):
    return classifier(text)[0]["label"]


demo = gr.Blocks()

with demo:
    audio_file = gr.Audio(type="filepath")
    text = gr.Textbox()
    label = gr.Label()

    b1 = gr.Button("Recognize Speech")
    b2 = gr.Button("Classify Sentiment")

    b1.click(speech_to_text, inputs=audio_file, outputs=text)
    b2.click(text_to_sentiment, inputs=text, outputs=label)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_speech_text_sentiment" />      
        
      </div>
      
      <div class="demo-content hidden" name="generate_english_german">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

from transformers import pipeline

english_translator = gr.Blocks.load(name="spaces/gradio/english-translator")
english_generator = pipeline("text-generation", model="distilgpt2")


def generate_text(text):
    english_text = english_generator(text)[0]["generated_text"]
    german_text = english_translator(english_text)
    return english_text, german_text


with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column():
            seed = gr.Text(label="Input Phrase")
        with gr.Column():
            english = gr.Text(label="Generated English Text")
            german = gr.Text(label="Generated German Text")
    btn = gr.Button("Generate")
    btn.click(generate_text, inputs=[seed], outputs=[english, german])
    gr.Examples(["My name is Clara and I am"], inputs=[seed])

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/generate_english_german" />      
        
      </div>
      
      <div class="demo-content hidden" name="sound_alert">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import time
import gradio as gr


js_function = "() => {new Audio('file=beep.mp3').play();}"

def task(x):
    time.sleep(2)
    return "Hello, " + x 

with gr.Blocks() as demo:
    name = gr.Textbox(label="name")
    greeting = gr.Textbox(label="greeting")
    name.blur(task, name, greeting)
    greeting.change(None, [], [], _js=js_function)  # Note that _js is a special arugment whose usage may change in the future
    
demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/sound_alert" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="blocks-header"
        class="text-3xl font-light py-4">Blocks</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">with gradio.Blocks():</code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Blocks is Gradio's low-level API that allows you to create more custom web applications and demos than Interfaces (yet still entirely in Python). <br> <br> Compared to the Interface class, Blocks offers more flexibility and control over: (1) the layout of components (2) the events that trigger the execution of functions (3) data flows (e.g. inputs can trigger outputs, which can trigger the next level of outputs). Blocks also offers ways to group together related demos such as with tabs. <br> <br> The basic usage of Blocks is as follows: create a Blocks object, then use it as a context (with the "with" statement), and then define layouts, components, or events within the Blocks context. Finally, call the launch() method to launch the demo. <br></p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
def update(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown("Start typing below and then click **Run** to see the output.")
    with gr.Row():
        inp = gr.Textbox(placeholder="What is your name?")
        out = gr.Textbox()
    btn = gr.Button("Run")
    btn.click(fn=update, inputs=inp, outputs=out)

demo.launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                theme
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "default"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>which theme to use - right now, only "default" is supported.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                analytics_enabled
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to allow basic telemetry. If None, will use GRADIO_ANALYTICS_ENABLED environment variable or default to True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                mode
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "blocks"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a human-friendly name for the kind of Blocks interface being created.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                title
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "Gradio"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The tab title to display when this is opened in a browser window.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                css
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>custom css or path to custom css file to apply to entire Blocks</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="load">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="load-header"
        class="text-3xl font-light py-4">load</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Blocks.<span>load(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">For reverse compatibility reasons, this is both a class method and an instance method, the two of which, confusingly, do two completely different things. <br> <br> Class method: loads a demo from a Hugging Face Spaces repo and creates it locally and returns a block instance. Equivalent to gradio.Interface.load() <br> <br> Instance method: adds event that runs as soon as the demo loads in the browser. Example usage below.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">import gradio as gr
import datetime
with gr.Blocks() as demo:
    def get_time():
        return datetime.datetime.now().time()
    dt = gr.Textbox(label="Current time")
    demo.load(get_time, inputs=None, outputs=dt)
demo.launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Optional[Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Instance Method - Callable function</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Optional[List[Component]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Instance Method - input list</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Optional[List[Component]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Instance Method - output list</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                name
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Class Method - the name of the model (e.g. "gpt2" or "facebook/bart-base") or space (e.g. "flax-community/spanish-gpt2"), can include the `src` as prefix (e.g. "models/facebook/bart-base")</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                src
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Class Method - the source of the model: `models` or `spaces` (or leave empty if source is provided as a prefix in `name`)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_key
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Class Method - optional access token for loading private Hugging Face Hub models or spaces. Find your token here: https://huggingface.co/settings/tokens</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                alias
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Class Method - optional string used as the name of the loaded model instead of the default name (only applies if loading a Space running Gradio 2.x)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">None | int</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Instance Method - Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/blocks_and_event_listeners">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Blocks And Event Listeners</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/controlling_layout">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Controlling Layout</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/state_in_blocks">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">State In Blocks</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/custom_CSS_and_JS">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Custom CSS And JS</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/custom_interpretations_with_blocks">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Custom Interpretations With Blocks</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/using_blocks_like_functions">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Using Blocks Like Functions</p>
            </div>
          </a>
          
        </div>
      
  
</div>
            
          </div>
        </section>
        <section id="block-layouts" class="pt-2 mb-8">
          <h3 class="text-3xl font-light my-4">Block Layouts</h3>
          <p class="mb-12">Customize the layout of your Blocks UI with the layout classes below.</p>
          <div class="flex flex-col gap-10">
            
              
                <div class="obj" id="row">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="row-header"
        class="text-3xl font-light py-4">Row</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">with gradio.Row():</code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Row is a layout element within Blocks that renders all children horizontally.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">with gradio.Blocks() as demo:
    with gradio.Row():
        gr.Image("lion.jpg")
        gr.Image("tiger.jpg")
demo.launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                variant
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "default"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, row will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/controlling_layout">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Controlling Layout</p>
            </div>
          </a>
          
        </div>
      
  
</div>
              
            
              
                <div class="obj" id="column">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="column-header"
        class="text-3xl font-light py-4">Column</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">with gradio.Column():</code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Column is a layout element within Blocks that renders all children vertically. The widths of columns can be set through the `scale` and `min_width` parameters. If a certain scale results in a column narrower than min_width, the min_width parameter will win.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">with gradio.Blocks() as demo:
    with gradio.Row():
        with gradio.Column(scale=1):
            text1 = gr.Textbox()
            text2 = gr.Textbox()
        with gradio.Column(scale=4):
            btn1 = gr.Button("Button 1")
            btn2 = gr.Button("Button 2")</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scale
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 1</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                min_width
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 320</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                variant
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "default"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, column will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/controlling_layout">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Controlling Layout</p>
            </div>
          </a>
          
        </div>
      
  
</div>
              
            
              
                <div class="obj" id="tab">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="tab-header"
        class="text-3xl font-light py-4">Tab</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">with gradio.Tab():</code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Tab is a layout element. Components defined within the Tab will be visible when this tab is selected tab.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">with gradio.Blocks() as demo:
    with gradio.Tab("Lion"):
        gr.Image("lion.jpg")
        gr.Button("New Lion")
    with gradio.Tab("Tiger"):
        gr.Image("tiger.jpg")
        gr.Button("New Tiger")</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The visual label for the tab</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                id
              </code>
              <p class="text-gray-500 italic">Optional[int | str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional identifier for the tab, required if you wish to control the selected tab from a predict function.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/controlling_layout">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Controlling Layout</p>
            </div>
          </a>
          
        </div>
      
  
</div>
              
            
              
                <div class="obj" id="box">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="box-header"
        class="text-3xl font-light py-4">Box</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">with gradio.Box():</code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Box is a a layout element which places children in a box with rounded corners and some padding around them.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">with gradio.Box():
    gr.Textbox(label="First")
    gr.Textbox(label="Last")</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, box will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Box</span></p>
      
  
</div>
              
            
              
                <div class="obj" id="accordion">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="accordion-header"
        class="text-3xl font-light py-4">Accordion</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Accordion(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Accordion is a layout element which can be toggled to show/hide the contained content.</p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">with gradio.Accordion("See Details"):
    gr.Markdown("lorem ipsum")</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic"><class 'inspect._empty'></p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>name of accordion section.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                open
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, accordion is open by default.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Accordion</span></p>
      
  
</div>
              
            
          </div>
        </section>
      </section>
      <section id="components" class="pt-2 flex flex-col gap-10">
        <div>
          <h2 id="components-header"
              class="text-4xl font-light mb-2 pt-2 text-orange-500">Components</h2>
          <p class="mt-8 text-lg">
            Gradio includes pre-built components that can be used as
            inputs or outputs in your Interface or Blocks with a single line of code. Components
            include <em>preprocessing</em> steps that convert user data submitted through browser
            to something that be can used by a Python function, and <em>postprocessing</em>
            steps to convert values returned by a Python function into something that can be displayed in a browser.
          </p>
          <p class="mt-2 text-lg">
            Consider an example with three inputs (Textbox, Number, and Image) and two outputs
            (Number and Gallery), below is a diagram of what our preprocessing will send to the function and what
            our postprocessing will require from it.
          </p>
          <img src="/assets/img/dataflow.svg" class="mt-4">
        </div>
        
          
            <div class="obj" id="textbox">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="hello_world"
          onclick="show_demo('textbox', 'hello_world')"

        >hello_world</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="diff_texts"
          onclick="show_demo('textbox', 'diff_texts')"

        >diff_texts</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sentence_builder"
          onclick="show_demo('textbox', 'sentence_builder')"

        >sentence_builder</button>
        
      </div>
      
      <div class="demo-content " name="hello_world">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
    
demo.launch()   </code></pre></div>
        
          <gradio-app space="gradio/hello_world" />      
        
      </div>
      
      <div class="demo-content hidden" name="diff_texts">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from difflib import Differ

import gradio as gr


def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


demo = gr.Interface(
    diff_texts,
    [
        gr.Textbox(
            label="Initial text",
            lines=3,
            value="The quick brown fox jumped over the lazy dogs.",
        ),
        gr.Textbox(
            label="Text to compare",
            lines=3,
            value="The fast brown fox jumps over lazy dogs.",
        ),
    ],
    gr.HighlightedText(
        label="Diff",
        combine_adjacent=True,
    ).style(color_map={"+": "red", "-": "green"}),
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/diff_texts" />      
        
      </div>
      
      <div class="demo-content hidden" name="sentence_builder">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.CheckboxGroup(["ran", "swam", "ate", "slept"]),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/sentence_builder" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="textbox-header"
        class="text-3xl font-light py-4">Textbox</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Textbox(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/textbox_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a textarea for user to enter string input or display string output. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes textarea value as a {str} into the function.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {str} returned from function and sets textarea value to it.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} representing the textbox input.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), submit(), blur()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: ""</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>default text to provide in textarea. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                lines
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 1</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>minimum number of line rows to provide in textarea.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_lines
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 20</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>maximum number of line rows to provide in textarea.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                placeholder
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>placeholder hint to provide behind textarea.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Textbox</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"textbox"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Text</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"text"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses lines=1
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.TextArea</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"textarea"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses lines=7
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Textbox.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="submit">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="submit-header"
        class="text-3xl font-light py-4">submit</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Textbox.<span>submit(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks. <br> <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="blur">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="blur-header"
        class="text-3xl font-light py-4">blur</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Textbox.<span>blur(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's is unfocused/blurred (e.g. when the user clicks outside of a textbox). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Callable function</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Textbox.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/creating_a_chatbot">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Creating A Chatbot</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/real_time_speech_recognition">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Real Time Speech Recognition</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="number">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="tax_calculator"
          onclick="show_demo('number', 'tax_calculator')"

        >tax_calculator</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('number', 'titanic_survival')"

        >titanic_survival</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_simple_squares"
          onclick="show_demo('number', 'blocks_simple_squares')"

        >blocks_simple_squares</button>
        
      </div>
      
      <div class="demo-content " name="tax_calculator">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def tax_calculator(income, marital_status, assets):
    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
    total_deductible = sum(assets["Cost"])
    taxable_income = income - total_deductible

    total_tax = 0
    for bracket, rate in tax_brackets:
        if taxable_income > bracket:
            total_tax += (taxable_income - bracket) * rate / 100

    if marital_status == "Married":
        total_tax *= 0.75
    elif marital_status == "Divorced":
        total_tax *= 0.8

    return round(total_tax)

demo = gr.Interface(
    tax_calculator,
    [
        "number",
        gr.Radio(["Single", "Married", "Divorced"]),
        gr.Dataframe(
            headers=["Item", "Cost"],
            datatype=["str", "number"],
            label="Assets Purchased this Year",
        ),
    ],
    "number",
    examples=[
        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
    ],
)

demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/tax_calculator" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_simple_squares">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

demo = gr.Blocks(css="#btn {color: red}")

with demo:
    default_json = {"a": "a"}

    num = gr.State(value=0)
    squared = gr.Number(value=0)
    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)

    stats = gr.State(value=default_json)
    table = gr.JSON()

    def increase(var, stats_history):
        var += 1
        stats_history[str(var)] = var**2
        return var, var**2, stats_history, stats_history

    btn.click(increase, [num, stats], [num, squared, stats, table])

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_simple_squares" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="number-header"
        class="text-3xl font-light py-4">Number</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Number(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/number_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a numeric field for user to enter numbers as input or display numeric output. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes field value as a {float} or {int} into the function, depending on `precision`.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects an {int} or {float} returned from the function and sets field value to it.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {float} or {int} representing the number's value.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), submit(), blur()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[float | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>default value. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will be editable; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                precision
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Precision to round input/output to. If set to 0, will round to nearest integer and covert type to int. If None, no rounding happens.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Number</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"number"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Number.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="submit">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="submit-header"
        class="text-3xl font-light py-4">submit</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Number.<span>submit(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks. <br> <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Number.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Number</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="slider">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sentence_builder"
          onclick="show_demo('slider', 'sentence_builder')"

        >sentence_builder</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="generate_tone"
          onclick="show_demo('slider', 'generate_tone')"

        >generate_tone</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('slider', 'titanic_survival')"

        >titanic_survival</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="interface_random_slider"
          onclick="show_demo('slider', 'interface_random_slider')"

        >interface_random_slider</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_random_slider"
          onclick="show_demo('slider', 'blocks_random_slider')"

        >blocks_random_slider</button>
        
      </div>
      
      <div class="demo-content " name="sentence_builder">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.CheckboxGroup(["ran", "swam", "ate", "slept"]),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/sentence_builder" />      
        
      </div>
      
      <div class="demo-content hidden" name="generate_tone">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return sr, audio

demo = gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(4, 6, step=1),
        gr.Textbox(value=1, type="number", label="Duration in seconds"),
    ],
    "audio",
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/generate_tone" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
      <div class="demo-content hidden" name="interface_random_slider">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def func(slider_1, slider_2, *args):
    return slider_1 + slider_2 * 5


demo = gr.Interface(
    func,
    [
        gr.Slider(minimum=1.5, maximum=250000.89, randomize=True, label="Random Big Range"),
        gr.Slider(minimum=-1, maximum=1, randomize=True, step=0.05, label="Random only multiple of 0.05 allowed"),
        gr.Slider(minimum=0, maximum=1, randomize=True, step=0.25, label="Random only multiples of 0.25 allowed"),
        gr.Slider(minimum=-100, maximum=100, randomize=True, step=3, label="Random between -100 and 100 step 3"),
        gr.Slider(minimum=-100, maximum=100, randomize=True, label="Random between -100 and 100"),
        gr.Slider(value=0.25, minimum=5, maximum=30, step=-1),
    ],
    "number",
    interpretation="default"
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/interface_random_slider" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_random_slider">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">
import gradio as gr


def func(slider_1, slider_2):
    return slider_1 * 5 + slider_2


with gr.Blocks() as demo:
    slider = gr.Slider(minimum=-10.2, maximum=15, label="Random Slider (Static)", randomize=True)
    slider_1 = gr.Slider(minimum=100, maximum=200, label="Random Slider (Input 1)", randomize=True)
    slider_2 = gr.Slider(minimum=10, maximum=23.2, label="Random Slider (Input 2)", randomize=True)
    slider_3 = gr.Slider(value=3, label="Non random slider")
    btn = gr.Button("Run")
    btn.click(func, inputs=[slider_1, slider_2], outputs=gr.Number())

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_random_slider" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="slider-header"
        class="text-3xl font-light py-4">Slider</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Slider(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/slider_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a slider that ranges from `minimum` to `maximum` with a step size of `step`. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes slider value as a {float} into the function.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects an {int} or {float} returned from function and sets slider value to it as long as it is within range.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> A {float} or {int} representing the slider's value.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                minimum
              </code>
              <p class="text-gray-500 italic">float</p>
              
              <p class="text-gray-500 font-semibold">default: 0</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>minimum value for slider.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                maximum
              </code>
              <p class="text-gray-500 italic">float</p>
              
              <p class="text-gray-500 font-semibold">default: 100</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>maximum value for slider.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[float | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>default value. If callable, the function will be called whenever the app loads to set the initial value of the component. Ignored if randomized=True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                step
              </code>
              <p class="text-gray-500 italic">Optional[float]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>increment between slider values.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, slider will be adjustable; if False, adjusting will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                randomize
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, the value of the slider when the app loads is taken uniformly at random from the range given by the minimum and maximum.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Slider</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"slider"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Slider.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Slider.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the slider.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/create_your_own_friends_with_a_gan">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Create Your Own Friends With A Gan</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="checkbox">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sentence_builder"
          onclick="show_demo('checkbox', 'sentence_builder')"

        >sentence_builder</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('checkbox', 'titanic_survival')"

        >titanic_survival</button>
        
      </div>
      
      <div class="demo-content " name="sentence_builder">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.CheckboxGroup(["ran", "swam", "ate", "slept"]),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/sentence_builder" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="checkbox-header"
        class="text-3xl font-light py-4">Checkbox</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Checkbox(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/checkbox_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a checkbox that can be set to `True` or `False`. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the status of the checkbox as a {bool} into the function.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {bool} returned from the function and, if it is True, checks the checkbox.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {bool} representing whether the box is checked.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">bool | Callable</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, checked by default. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, this checkbox can be checked; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Checkbox</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"checkbox"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Checkbox.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Checkbox.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Checkbox</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="checkboxgroup">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sentence_builder"
          onclick="show_demo('checkboxgroup', 'sentence_builder')"

        >sentence_builder</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('checkboxgroup', 'titanic_survival')"

        >titanic_survival</button>
        
      </div>
      
      <div class="demo-content " name="sentence_builder">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.CheckboxGroup(["ran", "swam", "ate", "slept"]),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/sentence_builder" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="checkboxgroup-header"
        class="text-3xl font-light py-4">CheckboxGroup</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>CheckboxGroup(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/checkboxgroup_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a set of checkboxes of which a subset can be checked.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the list of checked checkboxes as a {List[str]} or their indices as a {List[int]} into the function, depending on `type`.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {List[str]}, each element of which becomes a checked checkbox.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {List[str]} representing the values to be checked.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                choices
              </code>
              <p class="text-gray-500 italic">Optional[List[str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>list of options to select from.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">List[str] | Callable</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>default selected list of options. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "value"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Type of value to be returned by component. "value" returns the list of strings of the choices selected, "index" returns the list of indicies of the choices selected.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, choices in this checkbox group will be checkable; if False, checking will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.CheckboxGroup</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"checkboxgroup"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.CheckboxGroup.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.CheckboxGroup.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the CheckboxGroup.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                item_container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the items in a container.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">CheckboxGroup</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="radio">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sentence_builder"
          onclick="show_demo('radio', 'sentence_builder')"

        >sentence_builder</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('radio', 'titanic_survival')"

        >titanic_survival</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_essay"
          onclick="show_demo('radio', 'blocks_essay')"

        >blocks_essay</button>
        
      </div>
      
      <div class="demo-content " name="sentence_builder">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.CheckboxGroup(["ran", "swam", "ate", "slept"]),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/sentence_builder" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_essay">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def change_textbox(choice):
    if choice == "short":
        return gr.Textbox.update(lines=2, visible=True)
    elif choice == "long":
        return gr.Textbox.update(lines=8, visible=True)
    else:
        return gr.Textbox.update(visible=False)


with gr.Blocks() as demo:
    radio = gr.Radio(
        ["short", "long", "none"], label="What kind of essay would you like to write?"
    )
    text = gr.Textbox(lines=2, interactive=True)

    radio.change(fn=change_textbox, inputs=radio, outputs=text)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_essay" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="radio-header"
        class="text-3xl font-light py-4">Radio</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Radio(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/radio_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a set of radio buttons of which only one can be selected. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the value of the selected radio button as a {str} or its index as an {int} into the function, depending on `type`.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {str} corresponding to the value of the radio button to be selected.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} representing the radio option to select.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                choices
              </code>
              <p class="text-gray-500 italic">Optional[List[str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>list of options to select from.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the button selected by default. If None, no button is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "value"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, choices in this radio group will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Radio</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"radio"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Radio.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Radio.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the radio component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                item_container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place items in a container.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Radio</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="dropdown">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="sentence_builder"
          onclick="show_demo('dropdown', 'sentence_builder')"

        >sentence_builder</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('dropdown', 'titanic_survival')"

        >titanic_survival</button>
        
      </div>
      
      <div class="demo-content " name="sentence_builder">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def sentence_builder(quantity, animal, place, activity_list, morning):
    return f"""The {quantity} {animal}s went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""


demo = gr.Interface(
    sentence_builder,
    [
        gr.Slider(2, 20, value=4),
        gr.Dropdown(["cat", "dog", "bird"]),
        gr.Radio(["park", "zoo", "road"]),
        gr.CheckboxGroup(["ran", "swam", "ate", "slept"]),
        gr.Checkbox(label="Is it the morning?"),
    ],
    "text",
    examples=[
        [2, "cat", "park", ["ran", "swam"], True],
        [4, "dog", "zoo", ["ate", "swam"], False],
        [10, "bird", "road", ["ran"], False],
        [8, "cat", "zoo", ["ate"], True],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/sentence_builder" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="dropdown-header"
        class="text-3xl font-light py-4">Dropdown</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Dropdown(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/dropdown_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a dropdown of which only one entry can be selected.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the value of the selected dropdown entry as a {str} or its index as an {int} into the function, depending on `type`.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {str} corresponding to the value of the dropdown entry to be selected.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} representing the drop down value to select.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                choices
              </code>
              <p class="text-gray-500 italic">Optional[List[str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>list of options to select from.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>default value selected in dropdown. If None, no value is selected by default. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "value"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, choices in this dropdown will be selectable; if False, selection will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Dropdown</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"dropdown"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Dropdown.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Dropdown.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the Dropdown.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Dropdown</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="image">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="image_mod"
          onclick="show_demo('image', 'image_mod')"

        >image_mod</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="image_mod_default_image"
          onclick="show_demo('image', 'image_mod_default_image')"

        >image_mod_default_image</button>
        
      </div>
      
      <div class="demo-content " name="image_mod">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os


def image_mod(image):
    return image.rotate(45)


demo = gr.Interface(image_mod, gr.Image(type="pil"), "image",
    flagging_options=["blurry", "incorrect", "other"], examples=[
        os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg"),
        os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
        os.path.join(os.path.dirname(__file__), "images/logo.png")
        ])

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/image_mod" />      
        
      </div>
      
      <div class="demo-content hidden" name="image_mod_default_image">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os


def image_mod(image):
    return image.rotate(45)


cheetah = os.path.join(os.path.dirname(__file__), "images/cheetah1.jpg")

demo = gr.Interface(image_mod, gr.Image(type="pil", value=cheetah), "image",
    flagging_options=["blurry", "incorrect", "other"], examples=[
        os.path.join(os.path.dirname(__file__), "images/lion.jpg"),
        os.path.join(os.path.dirname(__file__), "images/logo.png")
        ])

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/image_mod_default_image" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="image-header"
        class="text-3xl font-light py-4">Image</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Image(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/image_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates an image component that can be used to upload/draw images (as an input) or display images (as an output).</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the uploaded image as a {numpy.array}, {PIL.Image} or {str} filepath depending on `type` -- unless `tool` is `sketch` AND source is one of `upload` or `webcam`. In these cases, a {dict} with keys `image` and `mask` is passed, and the format of the corresponding values depends on `type`.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {numpy.array}, {PIL.Image} or {str} or {pathlib.Path} filepath to an image and displays the image.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} filepath to a local file that contains the image.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), clear(), edit(), upload()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | PIL.Image | np.narray]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                shape
              </code>
              <p class="text-gray-500 italic">Tuple[int, int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>(width, height) shape to crop and resize image to; if None, matches input image size. Pass None for either width or height to only crop and resize the other.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                image_mode
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "RGB"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>"RGB" if color, or "L" if black and white.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                invert_colors
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to invert the image as a preprocessing step.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                source
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "upload"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                tool
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Tools used for editing. "editor" allows a full screen editor (and is the default if source is "upload" or "webcam"), "select" provides a cropping and zoom tool, "sketch" allows you to create a binary sketch (and is the default if source="canvas"), and "color-sketch" allows you to created a sketch in different colors. "color-sketch" can be used with source="upload" or "webcam" to allow sketching on an image. "sketch" can also be used with "upload" or "webcam" to create a mask over an image and in that case both the image and mask are passed into the function as a dictionary with keys "image" and "mask" respectively.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "numpy"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (width, height, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "file" produces a temporary file object whose path can be retrieved by file_obj.name, "filepath" passes a str path to a temporary file containing the image.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                streaming
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                mirror_webcam
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True webcam will be mirrored. Default is True.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Image</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"image"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Webcam</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"webcam"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses source="webcam"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Sketchpad</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"sketchpad"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses image_mode="L", source="canvas", shape=(28, 28), invert_colors=True
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Paint</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"paint"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses source="canvas", tool="color-sketch"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.ImageMask</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"imagemask"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses source="canvas", tool="sketch"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.ImagePaint</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"imagepaint"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses source="upload", tool="color-sketch"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Pil</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"pil"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses type="pil"
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="edit">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="edit-header"
        class="text-3xl font-light py-4">edit</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Image.<span>edit(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user edits the component (e.g. image) using the built-in editor. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="clear">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="clear-header"
        class="text-3xl font-light py-4">clear</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Image.<span>clear(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Image.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="stream">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="stream-header"
        class="text-3xl font-light py-4">stream</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Image.<span>stream(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user streams the component (e.g. a live webcam component)</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Callable function</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">List[Component]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of inputs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">List[Component]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of outputs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Image.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Image.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the Image component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                height
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Height of the image.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                width
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Width of the image.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/Gradio_and_ONNX_on_Hugging_Face">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Gradio And ONNX On Hugging Face</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_in_pytorch">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification In Pytorch</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_in_tensorflow">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification In Tensorflow</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_with_vision_transformers">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification With Vision Transformers</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/building_a_pictionary_app">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Building A Pictionary App</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/create_your_own_friends_with_a_gan">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Create Your Own Friends With A Gan</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="video">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="video_identity"
          onclick="show_demo('video', 'video_identity')"

        >video_identity</button>
        
      </div>
      
      <div class="demo-content " name="video_identity">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os


def video_identity(video):
    return video


demo = gr.Interface(video_identity, 
                    gr.Video(), 
                    "playable_video", 
                    examples=[
                        os.path.join(os.path.dirname(__file__), 
                                     "video/video_sample.mp4")], 
                    cache_examples=True)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/video_identity" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="video-header"
        class="text-3xl font-light py-4">Video</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Video(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/video_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a video component that can be used to upload/record videos (as an input) or display videos (as an output). For the video to be playable in the browser it must have a compatible container and codec combination. Allowed combinations are .mp4 with h264 codec, .ogg with theora codec, and .webm with vp9 codec. If the component detects that the output video would not be playable in the browser it will attempt to convert it to a playable mp4 video. If the conversion fails, the original video is returned.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the uploaded video as a {str} filepath or URL whose extension can be modified by `format`.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {str} filepath to a video which is displayed.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} filepath to a local file that contains the video.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), clear(), play(), pause(), stop(), upload()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A path or URL for the default value that Video component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                format
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Format of video format to be returned by component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep uploaded format.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                source
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "upload"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Source of video. "upload" creates a box where user can drop an video file, "webcam" allows user to record a video from their webcam.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will allow users to upload a video; if False, can only be used to display videos. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                mirror_webcam
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True webcma will be mirrored. Default is True.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Video</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"video"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.PlayableVideo</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"playablevideo"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses format="mp4"
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Video.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="clear">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="clear-header"
        class="text-3xl font-light py-4">clear</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Video.<span>clear(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="play">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="play-header"
        class="text-3xl font-light py-4">play</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Video.<span>play(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user plays the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="pause">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="pause-header"
        class="text-3xl font-light py-4">pause</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Video.<span>pause(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user pauses the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">Optional[AnyStr]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="stop">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="stop-header"
        class="text-3xl font-light py-4">stop</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Video.<span>stop(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user stops the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Video.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the video component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                height
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Height of the video.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                width
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Width of the video.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Video</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="audio">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="main_note"
          onclick="show_demo('audio', 'main_note')"

        >main_note</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="generate_tone"
          onclick="show_demo('audio', 'generate_tone')"

        >generate_tone</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="reverse_audio"
          onclick="show_demo('audio', 'reverse_audio')"

        >reverse_audio</button>
        
      </div>
      
      <div class="demo-content " name="main_note">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from math import log2, pow
import os

import numpy as np
from scipy.fftpack import fft

import gradio as gr

A4 = 440
C0 = A4 * pow(2, -4.75)
name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def get_pitch(freq):
    h = round(12 * log2(freq / C0))
    n = h % 12
    return name[n]


def main_note(audio):
    rate, y = audio
    if len(y.shape) == 2:
        y = y.T[0]
    N = len(y)
    T = 1.0 / rate
    x = np.linspace(0.0, N * T, N)
    yf = fft(y)
    yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
    xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)

    volume_per_pitch = {}
    total_volume = np.sum(yf2)
    for freq, volume in zip(xf, yf2):
        if freq == 0:
            continue
        pitch = get_pitch(freq)
        if pitch not in volume_per_pitch:
            volume_per_pitch[pitch] = 0
        volume_per_pitch[pitch] += 1.0 * volume / total_volume
    volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
    return volume_per_pitch


demo = gr.Interface(
    main_note,
    gr.Audio(source="microphone"),
    gr.Label(num_top_classes=4),
    examples=[
        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
    ],
    interpretation="default",
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/main_note" />      
        
      </div>
      
      <div class="demo-content hidden" name="generate_tone">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]

def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return sr, audio

demo = gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(4, 6, step=1),
        gr.Textbox(value=1, type="number", label="Duration in seconds"),
    ],
    "audio",
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/generate_tone" />      
        
      </div>
      
      <div class="demo-content hidden" name="reverse_audio">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import numpy as np

import gradio as gr


def reverse_audio(audio):
    sr, data = audio
    return (sr, np.flipud(data))


demo = gr.Interface(fn=reverse_audio, 
                    inputs="microphone", 
                    outputs="audio", 
                    examples=[
                    "https://samplelib.com/lib/preview/mp3/sample-3s.mp3",
                    os.path.join(os.path.dirname(__file__), "audio/recording1.wav")
        ], cache_examples=True)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/reverse_audio" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="audio-header"
        class="text-3xl font-light py-4">Audio</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Audio(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/audio_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output).</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the uploaded audio as a {Tuple(int, numpy.array)} corresponding to (sample rate, data) or as a {str} filepath, depending on `type`</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {Tuple(int, numpy.array)} corresponding to (sample rate, data) or as a {str} filepath or URL to an audio file, which gets displayed</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} filepath to a local file that contains audio.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), clear(), play(), pause(), stop(), upload()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Tuple[int, np.array] | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A path, URL, or [sample_rate, numpy array] tuple for the default value that Audio component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                source
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "upload"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Source of audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "numpy"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The format the audio file is converted to before being passed into the prediction function. "numpy" converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), "filepath" passes a str path to a temporary file containing the audio.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will allow users to upload and edit a audio file; if False, can only be used to play audio. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                streaming
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If set to True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'microphone'.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Audio</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"audio"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Microphone</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"microphone"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses source="microphone"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Mic</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"mic"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses source="microphone"
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="clear">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="clear-header"
        class="text-3xl font-light py-4">clear</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>clear(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="play">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="play-header"
        class="text-3xl font-light py-4">play</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>play(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user plays the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="pause">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="pause-header"
        class="text-3xl font-light py-4">pause</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>pause(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user pauses the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">Optional[AnyStr]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="stop">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="stop-header"
        class="text-3xl font-light py-4">stop</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>stop(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user stops the component (e.g. audio or video). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="stream">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="stream-header"
        class="text-3xl font-light py-4">stream</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>stream(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user streams the component (e.g. a live webcam component)</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Callable function</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">List[Component]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of inputs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">List[Component]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of outputs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Audio.<span>style(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the audio component.</p>
  <br>
  
  
  

  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/real_time_speech_recognition">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Real Time Speech Recognition</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="file">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="zip_to_json"
          onclick="show_demo('file', 'zip_to_json')"

        >zip_to_json</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="zip_files"
          onclick="show_demo('file', 'zip_files')"

        >zip_files</button>
        
      </div>
      
      <div class="demo-content " name="zip_to_json">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from zipfile import ZipFile

import gradio as gr


def zip_to_json(file_obj):
    files = []
    with ZipFile(file_obj.name) as zfile:
        for zinfo in zfile.infolist():
            files.append(
                {
                    "name": zinfo.filename,
                    "file_size": zinfo.file_size,
                    "compressed_size": zinfo.compress_size,
                }
            )
    return files


demo = gr.Interface(zip_to_json, "file", "json")

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/zip_to_json" />      
        
      </div>
      
      <div class="demo-content hidden" name="zip_files">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os
from zipfile import ZipFile

import gradio as gr


def zip_files(files):
    with ZipFile("tmp.zip", "w") as zipObj:
        for idx, file in enumerate(files):
            zipObj.write(file.name, "file" + str(idx))
    return "tmp.zip"

demo = gr.Interface(
    zip_files,
    gr.File(file_count="multiple"),
    "file",
    examples=[[[os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
    os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
    os.path.join(os.path.dirname(__file__),"files/titanic.csv")]]], 
    cache_examples=True
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/zip_files" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="file-header"
        class="text-3xl font-light py-4">File</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>File(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/file_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a file component that allows uploading generic file (when used as an input) and or displaying generic files (output).</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the uploaded file as a {file-object} or {List[file-object]} depending on `file_count` (or a {bytes}/{List{bytes}} depending on `type`)</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects function to return a {str} path to a file, or {List[str]} consisting of paths to files.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} path to a local file that populates the component.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), clear(), upload()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | List[str] | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default file to display, given as str file path. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                file_count
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "single"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory".</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "file"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Type of value to be returned by component. "file" returns a temporary file object whose path can be retrieved by file_obj.name and original filename can be retrieved with file_obj.orig_name, "binary" returns an bytes object.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.File</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"file"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Files</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"files"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses file_count="multiple"
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.File.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="clear">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="clear-header"
        class="text-3xl font-light py-4">clear</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.File.<span>clear(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.File.<span>style(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the file component.</p>
  <br>
  
  
  

  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">File</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="dataframe">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="filter_records"
          onclick="show_demo('dataframe', 'filter_records')"

        >filter_records</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="matrix_transpose"
          onclick="show_demo('dataframe', 'matrix_transpose')"

        >matrix_transpose</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="tax_calculator"
          onclick="show_demo('dataframe', 'tax_calculator')"

        >tax_calculator</button>
        
      </div>
      
      <div class="demo-content " name="filter_records">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def filter_records(records, gender):
    return records[records["gender"] == gender]


demo = gr.Interface(
    filter_records,
    [
        gr.Dataframe(
            headers=["name", "age", "gender"],
            datatype=["str", "number", "str"],
            row_count=5,
            col_count=(3, "fixed"),
        ),
        gr.Dropdown(["M", "F", "O"]),
    ],
    "dataframe",
    description="Enter gender as 'M', 'F', or 'O' for other.",
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/filter_records" />      
        
      </div>
      
      <div class="demo-content hidden" name="matrix_transpose">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import numpy as np

import gradio as gr


def transpose(matrix):
    return matrix.T


demo = gr.Interface(
    transpose,
    gr.Dataframe(type="numpy", datatype="number", row_count=5, col_count=3),
    "numpy",
    examples=[
        [np.zeros((3, 3)).tolist()],
        [np.ones((2, 2)).tolist()],
        [np.random.randint(0, 10, (3, 10)).tolist()],
        [np.random.randint(0, 10, (10, 3)).tolist()],
        [np.random.randint(0, 10, (10, 10)).tolist()],
    ],
    cache_examples=False
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/matrix_transpose" />      
        
      </div>
      
      <div class="demo-content hidden" name="tax_calculator">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def tax_calculator(income, marital_status, assets):
    tax_brackets = [(10, 0), (25, 8), (60, 12), (120, 20), (250, 30)]
    total_deductible = sum(assets["Cost"])
    taxable_income = income - total_deductible

    total_tax = 0
    for bracket, rate in tax_brackets:
        if taxable_income > bracket:
            total_tax += (taxable_income - bracket) * rate / 100

    if marital_status == "Married":
        total_tax *= 0.75
    elif marital_status == "Divorced":
        total_tax *= 0.8

    return round(total_tax)

demo = gr.Interface(
    tax_calculator,
    [
        "number",
        gr.Radio(["Single", "Married", "Divorced"]),
        gr.Dataframe(
            headers=["Item", "Cost"],
            datatype=["str", "number"],
            label="Assets Purchased this Year",
        ),
    ],
    "number",
    examples=[
        [10000, "Married", [["Suit", 5000], ["Laptop", 800], ["Car", 1800]]],
        [80000, "Single", [["Suit", 800], ["Watch", 1800], ["Car", 800]]],
    ],
)

demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/tax_calculator" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="dataframe-header"
        class="text-3xl font-light py-4">Dataframe</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Dataframe(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/dataframe_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Accepts or displays 2D input through a spreadsheet-like component for dataframes.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the uploaded spreadsheet data as a {pandas.DataFrame}, {numpy.array}, {List[List]}, or {List} depending on `type`</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {pandas.DataFrame}, {numpy.array}, {List[List]}, {List}, a {Dict} with keys `data` (and optionally `headers`), or {str} path to a csv, which is rendered in the spreadsheet.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} filepath to a csv with data, a pandas dataframe, or a list of lists (excluding headers) where each sublist is a row of data.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[List[List[Any]] | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default value as a 2-dimensional list of values. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                headers
              </code>
              <p class="text-gray-500 italic">Optional[List[str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of str header names. If None, no headers are shown.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                row_count
              </code>
              <p class="text-gray-500 italic">int | Tuple[int, str]</p>
              
              <p class="text-gray-500 font-semibold">default: (1, 'dynamic')</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Limit number of rows for input and decide whether user can create new rows. The first element of the tuple is an `int`, the row count; the second should be 'fixed' or 'dynamic', the new row behaviour. If an `int` is passed the rows default to 'dynamic'</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                col_count
              </code>
              <p class="text-gray-500 italic">Optional[int | Tuple[int, str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Limit number of columns for input and decide whether user can create new columns. The first element of the tuple is an `int`, the number of columns; the second should be 'fixed' or 'dynamic', the new column behaviour. If an `int` is passed the columns default to 'dynamic'</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                datatype
              </code>
              <p class="text-gray-500 italic">str | List[str]</p>
              
              <p class="text-gray-500 font-semibold">default: "str"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", "date", and "markdown".</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "pandas"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_rows
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: 20</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of rows to display at once. Set to None for infinite.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_cols
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of columns to display at once. Set to None for infinite.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                overflow_row_behaviour
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "paginate"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If set to "paginate", will create pages for overflow rows. If set to "show_ends", will show initial and final rows and truncate middle rows.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will allow users to edit the dataframe; if False, can only be used to display data. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                wrap
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True text in table cells will wrap when appropriate, if False the table will scroll horiztonally. Defaults to False.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Dataframe</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"dataframe"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Numpy</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"numpy"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses type="numpy"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Matrix</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"matrix"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses type="array"
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.List</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"list"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses type="array"
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Dataframe.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Dataframe.<span>style(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the DataFrame component.</p>
  <br>
  
  
  

  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Dataframe</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="timeseries">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="fraud_detector"
          onclick="show_demo('timeseries', 'fraud_detector')"

        >fraud_detector</button>
        
      </div>
      
      <div class="demo-content " name="fraud_detector">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import random
import os
import gradio as gr


def fraud_detector(card_activity, categories, sensitivity):
    activity_range = random.randint(0, 100)
    drop_columns = [
        column for column in ["retail", "food", "other"] if column not in categories
    ]
    if len(drop_columns):
        card_activity.drop(columns=drop_columns, inplace=True)
    return (
        card_activity,
        card_activity,
        {"fraud": activity_range / 100.0, "not fraud": 1 - activity_range / 100.0},
    )


demo = gr.Interface(
    fraud_detector,
    [
        gr.Timeseries(x="time", y=["retail", "food", "other"]),
        gr.CheckboxGroup(
            ["retail", "food", "other"], value=["retail", "food", "other"]
        ),
        gr.Slider(1, 3),
    ],
    [
        "dataframe",
        gr.Timeseries(x="time", y=["retail", "food", "other"]),
        gr.Label(label="Fraud Level"),
    ],
    examples=[
        [os.path.join(os.path.dirname(__file__), "fraud.csv"), ["retail", "food", "other"], 1.0],
    ],
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/fraud_detector" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="timeseries-header"
        class="text-3xl font-light py-4">Timeseries</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Timeseries(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/timeseries_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a component that can be used to upload/preview timeseries csv files or display a dataframe consisting of a time series graphically.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the uploaded timeseries data as a {pandas.DataFrame} into the function</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {pandas.DataFrame} or {str} path to a csv to be returned, which is then displayed as a timeseries graph</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} filepath of csv data with time series data.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>File path for the timeseries csv file. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                x
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Column name of x (time) series. None if csv has no headers, in which case first column is x series.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                y
              </code>
              <p class="text-gray-500 italic">str | List[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                colors
              </code>
              <p class="text-gray-500 italic">List[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>an ordered list of colors to use for each line plot</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will allow users to upload a timeseries csv; if False, can only be used to display timeseries data. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Timeseries</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"timeseries"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Timeseries.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Timeseries.<span>style(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the TimeSeries component.</p>
  <br>
  
  
  

  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Timeseries</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="state">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="chatbot_demo"
          onclick="show_demo('state', 'chatbot_demo')"

        >chatbot_demo</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_simple_squares"
          onclick="show_demo('state', 'blocks_simple_squares')"

        >blocks_simple_squares</button>
        
      </div>
      
      <div class="demo-content " name="chatbot_demo">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import random
import gradio as gr

def chat(message, history):
    history = history or []
    message = message.lower()
    if message.startswith("how many"):
        response = random.randint(1, 10)
    elif message.startswith("how"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

chatbot = gr.Chatbot().style(color_map=("green", "pink"))
demo = gr.Interface(
    chat,
    ["text", "state"],
    [chatbot, "state"],
    allow_flagging="never",
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/chatbot_demo" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_simple_squares">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

demo = gr.Blocks(css="#btn {color: red}")

with demo:
    default_json = {"a": "a"}

    num = gr.State(value=0)
    squared = gr.Number(value=0)
    btn = gr.Button("Next Square", elem_id="btn").style(rounded=False)

    stats = gr.State(value=default_json)
    table = gr.JSON()

    def increase(var, stats_history):
        var += 1
        stats_history[str(var)] = var**2
        return var, var**2, stats_history, stats_history

    btn.click(increase, [num, stats], [num, squared, stats, table])

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_simple_squares" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="state-header"
        class="text-3xl font-light py-4">State</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>State(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/state_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Special hidden component that stores session state across runs of the demo by the same user. The value of the State variable is cleared when the user refreshes the page. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> No preprocessing is performed</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> No postprocessing is performed</p>
  
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Any</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the initial value of the state. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/creating_a_chatbot">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Creating A Chatbot</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/real_time_speech_recognition">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Real Time Speech Recognition</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="button">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_inputs"
          onclick="show_demo('button', 'blocks_inputs')"

        >blocks_inputs</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_kinematics"
          onclick="show_demo('button', 'blocks_kinematics')"

        >blocks_kinematics</button>
        
      </div>
      
      <div class="demo-content " name="blocks_inputs">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os

def combine(a, b):
    return a + " " + b

def mirror(x):
    return x

with gr.Blocks() as demo:
    
    txt = gr.Textbox(label="Input", lines=2)
    txt_2 = gr.Textbox(label="Input 2")
    txt_3 = gr.Textbox(value="", label="Output")
    btn = gr.Button(value="Submit")
    btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])
    
    with gr.Row():
        im = gr.Image()
        im_2 = gr.Image()
        
    btn = gr.Button(value="Mirror Image")
    btn.click(mirror, inputs=[im], outputs=[im_2])
        
    gr.Markdown("## Text Examples")
    gr.Examples([["hi", "Adam"], ["hello", "Eve"]], [txt, txt_2], txt_3, combine, cache_examples=True)
    gr.Markdown("## Image Examples")
    gr.Examples(
        examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
        inputs=im,
        outputs=im_2,
        fn=mirror,
        cache_examples=True)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_inputs" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_kinematics">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
import numpy as np

import gradio as gr


def plot(v, a):
    g = 9.81
    theta = a / 180 * 3.14
    tmax = ((2 * v) * np.sin(theta)) / g
    timemat = tmax * np.linspace(0, 1, 40)[:, None]

    x = (v * timemat) * np.cos(theta)
    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))

    fig = plt.figure()
    plt.scatter(x=x, y=y, marker=".")
    plt.xlim(0, 100)
    plt.ylim(0, 60)
    return fig


demo = gr.Blocks()

with demo:
    gr.Markdown(
        "Let's do some kinematics! Choose the speed and angle to see the trajectory."
    )

    with gr.Row():
        speed = gr.Slider(1, 30, 25, label="Speed")
        angle = gr.Slider(0, 90, 45, label="Angle")
    output = gr.Plot()
    btn = gr.Button(value="Run")
    btn.click(plot, [speed, angle], output)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_kinematics" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="button-header"
        class="text-3xl font-light py-4">Button</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Button(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/button_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to create a button, that can be assigned arbitrary click() events. The label (value) of the button can be used as an input or set via the output of a function. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the button value as a {str} into the function</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {str} to be returned from a function, which is set as the label of the button</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>click()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">str | Callable</p>
              
              <p class="text-gray-500 font-semibold">default: "Run"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default text for the button to display. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                variant
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "secondary"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>'primary' for main call-to-action, 'secondary' for a more subdued style</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Button</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"button"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="click">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="click-header"
        class="text-3xl font-light py-4">click</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Button.<span>click(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component (e.g. a button) is clicked. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic"><class 'inspect._empty'></p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Button.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the button component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                full_width
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will expand to fill parent container.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Button</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="colorpicker">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="color_picker"
          onclick="show_demo('colorpicker', 'color_picker')"

        >color_picker</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="color_generator"
          onclick="show_demo('colorpicker', 'color_generator')"

        >color_generator</button>
        
      </div>
      
      <div class="demo-content " name="color_picker">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import numpy as np
import os
from PIL import Image, ImageColor


def change_color(icon, color):

    """
    Function that given an icon in .png format changes its color
    Args:
        icon: Icon whose color needs to be changed.
        color: Chosen color with which to edit the input icon.
    Returns:
        edited_image: Edited icon.
    """
    img = icon.convert("LA")
    img = img.convert("RGBA")
    image_np = np.array(icon)
    _, _, _, alpha = image_np.T
    mask = alpha > 0
    image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
    edited_image = Image.fromarray(image_np)
    return edited_image


inputs = [
    gr.Image(label="icon", type="pil", image_mode="RGBA"),
    gr.ColorPicker(label="color"),
]
outputs = gr.Image(label="colored icon")

demo = gr.Interface(
    fn=change_color,
    inputs=inputs,
    outputs=outputs,
    examples=[
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#ff0000"],
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#0000FF"],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/color_picker" />      
        
      </div>
      
      <div class="demo-content hidden" name="color_generator">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import cv2
import numpy as np
import random


# Convert decimal color to hexadecimal color
def RGB_to_Hex(rgb):
    color = "#"
    for i in rgb:
        num = int(i)
        color += str(hex(num))[-2:].replace("x", "0").upper()
    return color


# Randomly generate light or dark colors
def random_color(is_light=True):
    return (
        random.randint(0, 127) + int(is_light) * 128,
        random.randint(0, 127) + int(is_light) * 128,
        random.randint(0, 127) + int(is_light) * 128,
    )


def switch_color(color_style):
    if color_style == "light":
        is_light = True
    elif color_style == "dark":
        is_light = False
    back_color_ = random_color(is_light)  # Randomly generate colors
    back_color = RGB_to_Hex(back_color_)  # Convert to hexadecimal

    # Draw color pictures.
    w, h = 50, 50
    img = np.zeros((h, w, 3), np.uint8)
    cv2.rectangle(img, (0, 0), (w, h), back_color_, thickness=-1)

    return back_color, back_color, img


inputs = [gr.Radio(["light", "dark"], value="light")]

outputs = [
    gr.ColorPicker(label="color"),
    gr.Textbox(label="hexadecimal color"),
    gr.Image(type="numpy", label="color picture"),
]

title = "Color Generator"
description = (
    "Click the Submit button, and a dark or light color will be randomly generated."
)

demo = gr.Interface(
    fn=switch_color,
    inputs=inputs,
    outputs=outputs,
    title=title,
    description=description,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/color_generator" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="colorpicker-header"
        class="text-3xl font-light py-4">ColorPicker</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>ColorPicker(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/colorpicker_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Creates a color picker for user to select a color as string input.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes selected color value as a {str} into the function.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {str} returned from function and sets color picker value to it.</p>
  
  <p class="text-lg text-gray-500"> <span class="text-orange-500">Format expected for examples:</span> a {str} with a hexadecimal representation of a color, e.g. "#ff0000" for red.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), submit()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">str | Callable</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>default text to provide in color picker. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                interactive
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will be rendered as an editable color picker; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.ColorPicker</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"colorpicker"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.ColorPicker.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="submit">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="submit-header"
        class="text-3xl font-light py-4">submit</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.ColorPicker.<span>submit(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. This method can be used when this component is in a Gradio Blocks. <br> <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.ColorPicker.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">ColorPicker</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="label">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="main_note"
          onclick="show_demo('label', 'main_note')"

        >main_note</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="titanic_survival"
          onclick="show_demo('label', 'titanic_survival')"

        >titanic_survival</button>
        
      </div>
      
      <div class="demo-content " name="main_note">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from math import log2, pow
import os

import numpy as np
from scipy.fftpack import fft

import gradio as gr

A4 = 440
C0 = A4 * pow(2, -4.75)
name = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def get_pitch(freq):
    h = round(12 * log2(freq / C0))
    n = h % 12
    return name[n]


def main_note(audio):
    rate, y = audio
    if len(y.shape) == 2:
        y = y.T[0]
    N = len(y)
    T = 1.0 / rate
    x = np.linspace(0.0, N * T, N)
    yf = fft(y)
    yf2 = 2.0 / N * np.abs(yf[0 : N // 2])
    xf = np.linspace(0.0, 1.0 / (2.0 * T), N // 2)

    volume_per_pitch = {}
    total_volume = np.sum(yf2)
    for freq, volume in zip(xf, yf2):
        if freq == 0:
            continue
        pitch = get_pitch(freq)
        if pitch not in volume_per_pitch:
            volume_per_pitch[pitch] = 0
        volume_per_pitch[pitch] += 1.0 * volume / total_volume
    volume_per_pitch = {k: float(v) for k, v in volume_per_pitch.items()}
    return volume_per_pitch


demo = gr.Interface(
    main_note,
    gr.Audio(source="microphone"),
    gr.Label(num_top_classes=4),
    examples=[
        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
    ],
    interpretation="default",
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/main_note" />      
        
      </div>
      
      <div class="demo-content hidden" name="titanic_survival">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import os

import pandas as pd
from sklearn.ensemble import RandomForestClassifier
from sklearn.model_selection import train_test_split

import gradio as gr

current_dir = os.path.dirname(os.path.realpath(__file__))
data = pd.read_csv(os.path.join(current_dir, "files/titanic.csv"))


def encode_age(df):
    df.Age = df.Age.fillna(-0.5)
    bins = (-1, 0, 5, 12, 18, 25, 35, 60, 120)
    categories = pd.cut(df.Age, bins, labels=False)
    df.Age = categories
    return df


def encode_fare(df):
    df.Fare = df.Fare.fillna(-0.5)
    bins = (-1, 0, 8, 15, 31, 1000)
    categories = pd.cut(df.Fare, bins, labels=False)
    df.Fare = categories
    return df


def encode_df(df):
    df = encode_age(df)
    df = encode_fare(df)
    sex_mapping = {"male": 0, "female": 1}
    df = df.replace({"Sex": sex_mapping})
    embark_mapping = {"S": 1, "C": 2, "Q": 3}
    df = df.replace({"Embarked": embark_mapping})
    df.Embarked = df.Embarked.fillna(0)
    df["Company"] = 0
    df.loc[(df["SibSp"] > 0), "Company"] = 1
    df.loc[(df["Parch"] > 0), "Company"] = 2
    df.loc[(df["SibSp"] > 0) & (df["Parch"] > 0), "Company"] = 3
    df = df[
        [
            "PassengerId",
            "Pclass",
            "Sex",
            "Age",
            "Fare",
            "Embarked",
            "Company",
            "Survived",
        ]
    ]
    return df


train = encode_df(data)

X_all = train.drop(["Survived", "PassengerId"], axis=1)
y_all = train["Survived"]

num_test = 0.20
X_train, X_test, y_train, y_test = train_test_split(
    X_all, y_all, test_size=num_test, random_state=23
)

clf = RandomForestClassifier()
clf.fit(X_train, y_train)
predictions = clf.predict(X_test)


def predict_survival(passenger_class, is_male, age, company, fare, embark_point):
    if passenger_class is None or embark_point is None:
        return None
    df = pd.DataFrame.from_dict(
        {
            "Pclass": [passenger_class + 1],
            "Sex": [0 if is_male else 1],
            "Age": [age],
            "Company": [
                (1 if "Sibling" in company else 0) + (2 if "Child" in company else 0)
            ],
            "Fare": [fare],
            "Embarked": [embark_point + 1],
        }
    )
    df = encode_age(df)
    df = encode_fare(df)
    pred = clf.predict_proba(df)[0]
    return {"Perishes": float(pred[0]), "Survives": float(pred[1])}


demo = gr.Interface(
    predict_survival,
    [
        gr.Dropdown(["first", "second", "third"], type="index"),
        "checkbox",
        gr.Slider(0, 80, value=25),
        gr.CheckboxGroup(["Sibling", "Child"], label="Travelling with (select all)"),
        gr.Number(value=20),
        gr.Radio(["S", "C", "Q"], type="index"),
    ],
    "label",
    examples=[
        ["first", True, 30, [], 50, "S"],
        ["second", False, 40, ["Sibling", "Child"], 10, "Q"],
        ["third", True, 30, ["Child"], 20, "S"],
    ],
    interpretation="default",
    live=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/titanic_survival" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="label-header"
        class="text-3xl font-light py-4">Label</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Label(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/label_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Displays a classification label, along with confidence scores of top categories, if provided. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {Dict[str, float]} of classes and confidences, or {str} with just the class or an {int}/{float} for regression outputs, or a {str} path to a .json file containing a json dictionary in the structure produced by Label.postprocess().</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[Dict[str, float] | str | float | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default value to show in the component. If a str or number is provided, simply displays the string or number. If a {Dict[str, float]} of classes and confidences is provided, displays the top class on top and the `num_top_classes` below, along with their confidence bars. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                num_top_classes
              </code>
              <p class="text-gray-500 italic">Optional[int]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>number of most confident classes to show.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Label</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"label"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Label.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Label.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the label component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will add a container to the label - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/Gradio_and_ONNX_on_Hugging_Face">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Gradio And ONNX On Hugging Face</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_in_pytorch">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification In Pytorch</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_in_tensorflow">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification In Tensorflow</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_with_vision_transformers">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification With Vision Transformers</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/building_a_pictionary_app">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Building A Pictionary App</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="highlightedtext">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="diff_texts"
          onclick="show_demo('highlightedtext', 'diff_texts')"

        >diff_texts</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="text_analysis"
          onclick="show_demo('highlightedtext', 'text_analysis')"

        >text_analysis</button>
        
      </div>
      
      <div class="demo-content " name="diff_texts">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from difflib import Differ

import gradio as gr


def diff_texts(text1, text2):
    d = Differ()
    return [
        (token[2:], token[0] if token[0] != " " else None)
        for token in d.compare(text1, text2)
    ]


demo = gr.Interface(
    diff_texts,
    [
        gr.Textbox(
            label="Initial text",
            lines=3,
            value="The quick brown fox jumped over the lazy dogs.",
        ),
        gr.Textbox(
            label="Text to compare",
            lines=3,
            value="The fast brown fox jumps over lazy dogs.",
        ),
    ],
    gr.HighlightedText(
        label="Diff",
        combine_adjacent=True,
    ).style(color_map={"+": "red", "-": "green"}),
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/diff_texts" />      
        
      </div>
      
      <div class="demo-content hidden" name="text_analysis">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os
os.system('python -m spacy download en_core_web_sm')
import spacy
from spacy import displacy

nlp = spacy.load("en_core_web_sm")

def text_analysis(text):
    doc = nlp(text)
    html = displacy.render(doc, style="dep", page=True)
    html = (
        "<div style='max-width:100%; max-height:360px; overflow:auto'>"
        + html
        + "</div>"
    )
    pos_count = {
        "char_count": len(text),
        "token_count": 0,
    }
    pos_tokens = []

    for token in doc:
        pos_tokens.extend([(token.text, token.pos_), (" ", None)])

    return pos_tokens, pos_count, html

demo = gr.Interface(
    text_analysis,
    gr.Textbox(placeholder="Enter sentence here..."),
    ["highlight", "json", "html"],
    examples=[
        ["What a beautiful morning for a walk!"],
        ["It was the best of times, it was the worst of times."],
    ],
)

demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/text_analysis" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="highlightedtext-header"
        class="text-3xl font-light py-4">HighlightedText</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>HighlightedText(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/highlightedtext_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Displays text that contains spans that are highlighted by category or numerical value. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {List[Tuple[str, float | str]]]} consisting of spans of text and their associated labels, or a {Dict} with two keys: (1) "text" whose value is the complete text, and "entities", which is a list of dictionaries, each of which have the keys: "entity" (consisting of the entity label), "start" (the character index where the label starts), and "end" (the character index where the label ends). Entities should not overlap.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[List[Tuple[str, str | float | None]] | Dict | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default value to show. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                color_map
              </code>
              <p class="text-gray-500 italic">Dict[str, str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_legend
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>whether to show span categories in a separate legend or inline.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                combine_adjacent
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will merge the labels of adjacent tokens belonging to the same category.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                adjacent_separator
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: ""</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Specifies the separator to be used between tokens if combine_adjacent is True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.HighlightedText</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"highlightedtext"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Highlight</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"highlight"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.HighlightedText.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.HighlightedText.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the HighlightedText component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                color_map
              </code>
              <p class="text-gray-500 italic">Optional[Dict[str, str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Map between category and respective colors.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the component in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/named_entity_recognition">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Named Entity Recognition</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="json">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="zip_to_json"
          onclick="show_demo('json', 'zip_to_json')"

        >zip_to_json</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_xray"
          onclick="show_demo('json', 'blocks_xray')"

        >blocks_xray</button>
        
      </div>
      
      <div class="demo-content " name="zip_to_json">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">from zipfile import ZipFile

import gradio as gr


def zip_to_json(file_obj):
    files = []
    with ZipFile(file_obj.name) as zfile:
        for zinfo in zfile.infolist():
            files.append(
                {
                    "name": zinfo.filename,
                    "file_size": zinfo.file_size,
                    "compressed_size": zinfo.compress_size,
                }
            )
    return files


demo = gr.Interface(zip_to_json, "file", "json")

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/zip_to_json" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_xray">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import random
import time


def xray_model(diseases, img):
    time.sleep(4)
    return [{disease: random.random() for disease in diseases}]


def ct_model(diseases, img):
    time.sleep(3)
    return [{disease: 0.1 for disease in diseases}]

with gr.Blocks() as demo:
    gr.Markdown(
        """
# Detect Disease From Scan
With this model you can lorem ipsum
- ipsum 1
- ipsum 2
"""
    )
    disease = gr.CheckboxGroup(
        choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
    )

    with gr.Tab("X-ray") as x_tab:
        with gr.Row():
            xray_scan = gr.Image()
            xray_results = gr.JSON()
        xray_run = gr.Button("Run")
        xray_run.click(
            xray_model,
            inputs=[disease, xray_scan],
            outputs=xray_results,
            api_name="xray_model"
        )

    with gr.Tab("CT Scan"):
        with gr.Row():
            ct_scan = gr.Image()
            ct_results = gr.JSON()
        ct_run = gr.Button("Run")
        ct_run.click(
            ct_model,
            inputs=[disease, ct_scan],
            outputs=ct_results,
            api_name="ct_model"
        )

    upload_btn = gr.Button("Upload Results")
    upload_btn.click(
        lambda ct, xr: time.sleep(5),
        inputs=[ct_results, xray_results],
        outputs=[],
    )

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_xray" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="json-header"
        class="text-3xl font-light py-4">JSON</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>JSON(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/json_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to display arbitrary JSON output prettily. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a valid JSON {str} -- or a {list} or {dict} that is JSON serializable.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default value. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.JSON</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"json"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.JSON.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.JSON.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the JSON component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the JSON in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">JSON</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="html">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="text_analysis"
          onclick="show_demo('html', 'text_analysis')"

        >text_analysis</button>
        
      </div>
      
      <div class="demo-content " name="text_analysis">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os
os.system('python -m spacy download en_core_web_sm')
import spacy
from spacy import displacy

nlp = spacy.load("en_core_web_sm")

def text_analysis(text):
    doc = nlp(text)
    html = displacy.render(doc, style="dep", page=True)
    html = (
        "<div style='max-width:100%; max-height:360px; overflow:auto'>"
        + html
        + "</div>"
    )
    pos_count = {
        "char_count": len(text),
        "token_count": 0,
    }
    pos_tokens = []

    for token in doc:
        pos_tokens.extend([(token.text, token.pos_), (" ", None)])

    return pos_tokens, pos_count, html

demo = gr.Interface(
    text_analysis,
    gr.Textbox(placeholder="Enter sentence here..."),
    ["highlight", "json", "html"],
    examples=[
        ["What a beautiful morning for a walk!"],
        ["It was the best of times, it was the worst of times."],
    ],
)

demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/text_analysis" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="html-header"
        class="text-3xl font-light py-4">HTML</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>HTML(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/html_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to display arbitrary HTML output. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a valid HTML {str}.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">str | Callable</p>
              
              <p class="text-gray-500 font-semibold">default: ""</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default value. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.HTML</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"html"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.HTML.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/key_features">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Key Features</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="gallery">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="fake_gan"
          onclick="show_demo('gallery', 'fake_gan')"

        >fake_gan</button>
        
      </div>
      
      <div class="demo-content " name="fake_gan">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python"># This demo needs to be run from the repo folder.
# python demo/fake_gan/run.py
import os
import random

import gradio as gr


def fake_gan():
    images = [
        (random.choice(
            [
                "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
                "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
                "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
            ]
        ), f"label {i}" if i != 0 else "label" * 50)
        for i in range(3)
    ]
    return images


with gr.Blocks() as demo:
    with gr.Column(variant="panel"):
        with gr.Row(variant="compact"):
            text = gr.Textbox(
                label="Enter your prompt",
                show_label=False,
                max_lines=1,
                placeholder="Enter your prompt",
            ).style(
                container=False,
            )
            btn = gr.Button("Generate image").style(full_width=False)

        gallery = gr.Gallery(
            label="Generated images", show_label=False, elem_id="gallery"
        ).style(grid=[2], height="auto")

    btn.click(fake_gan, None, gallery)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/fake_gan" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="gallery-header"
        class="text-3xl font-light py-4">Gallery</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Gallery(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/gallery_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to display a list of images as a gallery that can be scrolled through. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a list of images in any format, {List[numpy.array | PIL.Image | str]}, or a {List} of (image, {str} caption) tuples and displays them.</p>
  
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[List[np.ndarray | PIL.Image | str] | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of images to display in the gallery by default. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Gallery</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"gallery"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Gallery.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the gallery component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                grid
              </code>
              <p class="text-gray-500 italic">Optional[int | Tuple]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Represents the number of images that should be shown in one row, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). if fewer that 6 are given then the last will be used for all subsequent breakpoints</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                height
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Height of the gallery.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                container
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place gallery in a container - providing some extra padding around the border.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Gallery</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="chatbot">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="chatbot_demo"
          onclick="show_demo('chatbot', 'chatbot_demo')"

        >chatbot_demo</button>
        
      </div>
      
      <div class="demo-content " name="chatbot_demo">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import random
import gradio as gr

def chat(message, history):
    history = history or []
    message = message.lower()
    if message.startswith("how many"):
        response = random.randint(1, 10)
    elif message.startswith("how"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

chatbot = gr.Chatbot().style(color_map=("green", "pink"))
demo = gr.Interface(
    chat,
    ["text", "state"],
    [chatbot, "state"],
    allow_flagging="never",
)
if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/chatbot_demo" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="chatbot-header"
        class="text-3xl font-light py-4">Chatbot</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Chatbot(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/chatbot_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Displays a chatbot output showing both user submitted messages and responses <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {List[Tuple[str, str]]}, a list of tuples with user inputs and responses.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[List[Tuple[str, str]] | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Default value to show in chatbot. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                color_map
              </code>
              <p class="text-gray-500 italic">Dict[str, str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Chatbot</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"chatbot"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Chatbot.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Chatbot.<span>style(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the Chatbot component.</p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                color_map
              </code>
              <p class="text-gray-500 italic">Optional[List[str, str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List containing colors to apply to chat bubbles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Chatbot</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="model3d">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="model3D"
          onclick="show_demo('model3d', 'model3D')"

        >model3D</button>
        
      </div>
      
      <div class="demo-content " name="model3D">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os


def load_mesh(mesh_file_name):
    return mesh_file_name, mesh_file_name


demo = gr.Interface(
    fn=load_mesh,
    inputs=gr.Model3D(),
    outputs=[
        gr.Model3D(
            clear_color=[0.0, 0.0, 0.0, 0.0],  label="3D Model"),
        gr.File(label="Download 3D Model")
    ],
    examples=[
        [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
        [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],
        [os.path.join(os.path.dirname(__file__), "files/Fox.gltf")],
        [os.path.join(os.path.dirname(__file__), "files/face.obj")],
    ],
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/model3D" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="model3d-header"
        class="text-3xl font-light py-4">Model3D</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Model3D(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/model3d_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Component allows users to upload or view 3D Model files (.obj, .glb, or .gltf). <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> This component passes the uploaded file as a {str} filepath.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects function to return a {str} path to a file of type (.obj, glb, or .gltf)</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), clear(), edit()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[str | Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>path to (.obj, glb, or .gltf) file to show in model3D viewer. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                clear_color
              </code>
              <p class="text-gray-500 italic">List[float]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>background color of scene</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Model3D</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"model3d"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Model3D.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="edit">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="edit-header"
        class="text-3xl font-light py-4">edit</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Model3D.<span>edit(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user edits the component (e.g. image) using the built-in editor. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="clear">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="clear-header"
        class="text-3xl font-light py-4">clear</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Model3D.<span>clear(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Model3D.<span>style(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the Model3D component.</p>
  <br>
  
  
  

  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/how_to_use_3D_model_component">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">How To Use 3D Model Component</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="plot">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="outbreak_forecast"
          onclick="show_demo('plot', 'outbreak_forecast')"

        >outbreak_forecast</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_kinematics"
          onclick="show_demo('plot', 'blocks_kinematics')"

        >blocks_kinematics</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="stock_forecast"
          onclick="show_demo('plot', 'stock_forecast')"

        >stock_forecast</button>
        
      </div>
      
      <div class="demo-content " name="outbreak_forecast">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
from math import sqrt
import matplotlib

matplotlib.use("Agg")

import matplotlib.pyplot as plt
import numpy as np
import plotly.express as px
import pandas as pd


def outbreak(plot_type, r, month, countries, social_distancing):
    months = ["January", "February", "March", "April", "May"]
    m = months.index(month)
    start_day = 30 * m
    final_day = 30 * (m + 1)
    x = np.arange(start_day, final_day + 1)
    pop_count = {"USA": 350, "Canada": 40, "Mexico": 300, "UK": 120}
    if social_distancing:
        r = sqrt(r)
    df = pd.DataFrame({"day": x})
    for country in countries:
        df[country] = x ** (r) * (pop_count[country] + 1)

    if plot_type == "Matplotlib":
        fig = plt.figure()
        plt.plot(df["day"], df[countries].to_numpy())
        plt.title("Outbreak in " + month)
        plt.ylabel("Cases")
        plt.xlabel("Days since Day 0")
        plt.legend(countries)
        return fig
    elif plot_type == "Plotly":
        fig = px.line(df, x="day", y=countries)
        fig.update_layout(
            title="Outbreak in " + month,
            xaxis_title="Cases",
            yaxis_title="Days Since Day 0",
        )
        return fig
    else:
        raise ValueError("A plot type must be selected")


inputs = [
    gr.Dropdown(["Matplotlib", "Plotly"], label="Plot Type"),
    gr.Slider(1, 4, 3.2, label="R"),
    gr.Dropdown(["January", "February", "March", "April", "May"], label="Month"),
    gr.CheckboxGroup(
        ["USA", "Canada", "Mexico", "UK"], label="Countries", value=["USA", "Canada"]
    ),
    gr.Checkbox(label="Social Distancing?"),
]
outputs = gr.Plot()

demo = gr.Interface(
    fn=outbreak,
    inputs=inputs,
    outputs=outputs,
    examples=[
        ["Matplotlib", 2, "March", ["Mexico", "UK"], True],
        ["Plotly", 3.6, "February", ["Canada", "Mexico", "UK"], False],
    ],
    cache_examples=True,
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/outbreak_forecast" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_kinematics">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
import numpy as np

import gradio as gr


def plot(v, a):
    g = 9.81
    theta = a / 180 * 3.14
    tmax = ((2 * v) * np.sin(theta)) / g
    timemat = tmax * np.linspace(0, 1, 40)[:, None]

    x = (v * timemat) * np.cos(theta)
    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))

    fig = plt.figure()
    plt.scatter(x=x, y=y, marker=".")
    plt.xlim(0, 100)
    plt.ylim(0, 60)
    return fig


demo = gr.Blocks()

with demo:
    gr.Markdown(
        "Let's do some kinematics! Choose the speed and angle to see the trajectory."
    )

    with gr.Row():
        speed = gr.Slider(1, 30, 25, label="Speed")
        angle = gr.Slider(0, 90, 45, label="Angle")
    output = gr.Plot()
    btn = gr.Button(value="Run")
    btn.click(plot, [speed, angle], output)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_kinematics" />      
        
      </div>
      
      <div class="demo-content hidden" name="stock_forecast">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
import numpy as np

import gradio as gr


def plot_forecast(final_year, companies, noise, show_legend, point_style):
    start_year = 2020
    x = np.arange(start_year, final_year + 1)
    year_count = x.shape[0]
    plt_format = ({"cross": "X", "line": "-", "circle": "o--"})[point_style]
    fig = plt.figure()
    ax = fig.add_subplot(111)
    for i, company in enumerate(companies):
        series = np.arange(0, year_count, dtype=float)
        series = series**2 * (i + 1)
        series += np.random.rand(year_count) * noise
        ax.plot(x, series, plt_format)
    if show_legend:
        plt.legend(companies)
    return fig


demo = gr.Interface(
    plot_forecast,
    [
        gr.Radio([2025, 2030, 2035, 2040], label="Project to:"),
        gr.CheckboxGroup(["Google", "Microsoft", "Gradio"], label="Company Selection"),
        gr.Slider(1, 100, label="Noise Level"),
        gr.Checkbox(label="Show Legend"),
        gr.Dropdown(["cross", "line", "circle"], label="Style"),
    ],
    gr.Plot(label="forecast"),
)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/stock_forecast" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="plot-header"
        class="text-3xl font-light py-4">Plot</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Plot(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/plot_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to display various kinds of plots (matplotlib, plotly, or bokeh are supported) <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects either a {matplotlib.figure.Figure}, a {plotly.graph_objects._figure.Figure}, or a {dict} corresponding to a bokeh plot (json_item format)</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change(), clear()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">Optional[Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Optionally, supply a default plot object to display, must be a matplotlib, plotly, or bokeh figure. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>component name in interface.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_label
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, will display label.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Plot</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"plot"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Plot.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="clear">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="clear-header"
        class="text-3xl font-light py-4">clear</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Plot.<span>clear(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the user clears the component (e.g. image or audio) using the X button for the component. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Plot</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="markdown">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_hello"
          onclick="show_demo('markdown', 'blocks_hello')"

        >blocks_hello</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_kinematics"
          onclick="show_demo('markdown', 'blocks_kinematics')"

        >blocks_kinematics</button>
        
      </div>
      
      <div class="demo-content " name="blocks_hello">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def welcome(name):
    return f"Welcome to Gradio, {name}!"

with gr.Blocks() as demo:
    gr.Markdown(
    """
    # Hello World!
    Start typing below to see the output.
    """)
    inp = gr.Textbox(placeholder="What is your name?")
    out = gr.Textbox()
    inp.change(welcome, inp, out)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/blocks_hello" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_kinematics">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt
import numpy as np

import gradio as gr


def plot(v, a):
    g = 9.81
    theta = a / 180 * 3.14
    tmax = ((2 * v) * np.sin(theta)) / g
    timemat = tmax * np.linspace(0, 1, 40)[:, None]

    x = (v * timemat) * np.cos(theta)
    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))

    fig = plt.figure()
    plt.scatter(x=x, y=y, marker=".")
    plt.xlim(0, 100)
    plt.ylim(0, 60)
    return fig


demo = gr.Blocks()

with demo:
    gr.Markdown(
        "Let's do some kinematics! Choose the speed and angle to see the trajectory."
    )

    with gr.Row():
        speed = gr.Slider(1, 30, 25, label="Speed")
        angle = gr.Slider(0, 90, 45, label="Angle")
    output = gr.Plot()
    btn = gr.Button(value="Run")
    btn.click(plot, [speed, angle], output)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_kinematics" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="markdown-header"
        class="text-3xl font-light py-4">Markdown</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Markdown(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/markdown_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to render arbitrary Markdown output. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a valid {str} that can be rendered as Markdown.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>change()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                value
              </code>
              <p class="text-gray-500 italic">str | Callable</p>
              
              <p class="text-gray-500 font-semibold">default: ""</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Value to show in Markdown component. If callable, the function will be called whenever the app loads to set the initial value of the component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Markdown</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"markdown"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="change">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="change-header"
        class="text-3xl font-light py-4">change</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Markdown.<span>change(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component's input value changes (e.g. when the user types in a textbox or uploads an image). This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic">Optional[bool]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/key_features">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Key Features</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
          
            <div class="obj" id="dataset">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="dataset-header"
        class="text-3xl font-light py-4">Dataset</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gr.Dataset(components, samples)</code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/dataset_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to create an output widget for showing datasets. Used to render the examples box.</p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> passes the selected sample either as a {list} of data (if type="value") or as an {int} index (if type="index")</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {list} of {lists} corresponding to the dataset data.</p>
  
  
  <p class="text-lg text-gray-500"><span class="text-orange-500">Supported events:</span> <em>click()</em></p>
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                components
              </code>
              <p class="text-gray-500 italic">List[IOComponent] | List[str]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Which component types to show in this dataset widget, can be passed in as a list of string names or Components instances. The following components are supported in a Dataset: Audio, Checkbox, CheckboxGroup, ColorPicker, Dataframe, Dropdown, File, HTML, Image, Markdown, Model3D, Number, Radio, Slider, Textbox, TimeSeries, Video</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                samples
              </code>
              <p class="text-gray-500 italic">List[List[Any]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>a nested list of samples. Each sublist within the outer list represents a data sample, and each element within the sublist represents an value for each component</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                headers
              </code>
              <p class="text-gray-500 italic">Optional[List[str]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Column headers in the Dataset widget, should be the same len as components. If not provided, inferred from component labels</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                type
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "values"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>'values' if clicking on a sample should pass the value of the sample, or "index" if it should pass the index of the sample</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, component will be hidden.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Dataset</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"dataset"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
    <h4 class="mt-4 p-3 font-semibold">Methods</h4>
      <div class="flex flex-col gap-8 pl-12">
        
          
            <div class="obj" id="click">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="click-header"
        class="text-3xl font-light py-4">click</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Dataset.<span>click(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This event is triggered when the component (e.g. a button) is clicked. This method can be used when this component is in a Gradio Blocks. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Callable</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | Set[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Component | List[Component] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>List of gradio.components to use as inputs. If the function returns no outputs, this should be an empty list.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                api_name
              </code>
              <p class="text-gray-500 italic">AnyStr</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Defining this parameter exposes the endpoint in the api docs</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                status_tracker
              </code>
              <p class="text-gray-500 italic">Optional[StatusTracker]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p></p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                scroll_to_output
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will scroll to output component on completion</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                show_progress
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will show progress animation while pending</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                queue
              </code>
              <p class="text-gray-500 italic"><class 'inspect._empty'></p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, will place the request on the queue, if the queue exists</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                max_batch_size
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 4</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If False, will not run postprocessing of component data before returning 'fn' output to the browser.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cancels
              </code>
              <p class="text-gray-500 italic">Dict[str, Any] | List[Dict[str, Any]] | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>A list of other events to cancel when this event is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                every
              </code>
              <p class="text-gray-500 italic">float | None</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Run this event 'every' number of seconds. Interpreted in seconds. Queue must be enabled.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
          
            <div class="obj" id="style">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="style-header"
        class="text-3xl font-light py-4">style</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.Dataset.<span>style(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This method can be used to change the appearance of the Dataset component.</p>
  <br>
  
  
  

  
  
  
  
  
</div>
          
        
      <div class="ml-12"> </div>
    </div>
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <p class="my-2 text-gray-500">No guides yet, <a class="font-semibold text-orange-500 border-b border-orange-500 " target="_blank" href="https://github.com/gradio-app/gradio/tree/main/guides">contribute</a> a guide about <span class="font-semibold">Dataset</span></p>
      
  
</div>
          
        
          
            <div class="obj" id="interpretation">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="interpretation-header"
        class="text-3xl font-light py-4">Interpretation</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Interpretation(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
    <div class="embedded-component">
      
        <gradio-app space="gradio/interpretation_component" />
      
    </div>
  
  <p class="mt-8 mb-2 text-lg">Used to create an interpretation widget for a component. <br></p>
  <br>
  
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As input: </span> this component does *not* accept input.</p>
  <p class="mb-2 text-lg text-gray-500"> <span class="text-orange-500">As output:</span> expects a {dict} with keys "original" and "interpretation".</p>
  
  
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                component
              </code>
              <p class="text-gray-500 italic">Component</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Which component to show in the interpretation widget.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                visible
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Whether or not the interpretation is visible.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  <table class="mb-4 table-fixed w-full mt-6">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Class</th>
        <th class="p-3 font-semibold">Interface String Shortcut</th>
        <th class="p-3 font-semibold">Initialization</th>
      </tr>
    </thead>
    <tbody class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden">
    
        <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
          <td class="p-3 w-2/5">
            <p><code class="lang-python">gradio.Interpretation</code></p>
          </td>
          <td class="p-3 w-2/5">
            <p>"interpretation"</p>
          </td>
          <td class="p-3 text-gray-700">
            Uses default values
          </td>
        </tr>
    
    </tbody>
  </table>
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/custom_interpretations_with_blocks">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Custom Interpretations With Blocks</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
      </section>
      <section id="component-helpers" class="pt-2 flex flex-col gap-10">
        <div>
          <h2 id="component-helpers-header"
              class="text-4xl font-light mb-2 pt-2 text-orange-500">Components Helpers</h2>
          <p class="mt-8 text-lg">
            Gradio includes helper classes that abstract over existing components. The goal of these classes is to help you
            add common functionality to your app without having to repeatedly create the same components and event listeners.
          </p>
        </div>
        
          
            <div class="obj" id="examples">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_inputs"
          onclick="show_demo('examples', 'blocks_inputs')"

        >blocks_inputs</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="fake_gan"
          onclick="show_demo('examples', 'fake_gan')"

        >fake_gan</button>
        
      </div>
      
      <div class="demo-content " name="blocks_inputs">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr
import os

def combine(a, b):
    return a + " " + b

def mirror(x):
    return x

with gr.Blocks() as demo:
    
    txt = gr.Textbox(label="Input", lines=2)
    txt_2 = gr.Textbox(label="Input 2")
    txt_3 = gr.Textbox(value="", label="Output")
    btn = gr.Button(value="Submit")
    btn.click(combine, inputs=[txt, txt_2], outputs=[txt_3])
    
    with gr.Row():
        im = gr.Image()
        im_2 = gr.Image()
        
    btn = gr.Button(value="Mirror Image")
    btn.click(mirror, inputs=[im], outputs=[im_2])
        
    gr.Markdown("## Text Examples")
    gr.Examples([["hi", "Adam"], ["hello", "Eve"]], [txt, txt_2], txt_3, combine, cache_examples=True)
    gr.Markdown("## Image Examples")
    gr.Examples(
        examples=[os.path.join(os.path.dirname(__file__), "lion.jpg")],
        inputs=im,
        outputs=im_2,
        fn=mirror,
        cache_examples=True)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_inputs" />      
        
      </div>
      
      <div class="demo-content hidden" name="fake_gan">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python"># This demo needs to be run from the repo folder.
# python demo/fake_gan/run.py
import os
import random

import gradio as gr


def fake_gan():
    images = [
        (random.choice(
            [
                "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
                "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
                "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
                "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
            ]
        ), f"label {i}" if i != 0 else "label" * 50)
        for i in range(3)
    ]
    return images


with gr.Blocks() as demo:
    with gr.Column(variant="panel"):
        with gr.Row(variant="compact"):
            text = gr.Textbox(
                label="Enter your prompt",
                show_label=False,
                max_lines=1,
                placeholder="Enter your prompt",
            ).style(
                container=False,
            )
            btn = gr.Button("Generate image").style(full_width=False)

        gallery = gr.Gallery(
            label="Generated images", show_label=False, elem_id="gallery"
        ).style(grid=[2], height="auto")

    btn.click(fake_gan, None, gallery)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/fake_gan" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="examples-header"
        class="text-3xl font-light py-4">Examples</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>Examples(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">This class is a wrapper over the Dataset component and can be used to create Examples for Blocks / Interfaces. Populates the Dataset component with examples and assigns event listener so that clicking on an example populates the input/output components. Optionally handles example caching for fast inference. <br></p>
  <br>
  
  
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                examples
              </code>
              <p class="text-gray-500 italic">List[Any] | List[List[Any]] | str</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>example inputs that can be clicked to populate specific components. Should be nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component. A string path to a directory of examples can also be provided. If there are multiple input components and a directory is provided, a log.csv file must be present in the directory to link corresponding inputs.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                inputs
              </code>
              <p class="text-gray-500 italic">IOComponent | List[IOComponent]</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the component or list of components corresponding to the examples</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                outputs
              </code>
              <p class="text-gray-500 italic">Optional[IOComponent | List[IOComponent]]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>optionally, provide the component or list of components corresponding to the output of the examples. Required if `cache` is True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                fn
              </code>
              <p class="text-gray-500 italic">Optional[Callable]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>optionally, provide the function to run to generate the outputs corresponding to the examples. Required if `cache` is True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                cache_examples
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, caches examples for fast runtime. If True, then `fn` and `outputs` need to be provided</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                examples_per_page
              </code>
              <p class="text-gray-500 italic">int</p>
              
              <p class="text-gray-500 font-semibold">default: 10</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>how many examples to show per page (this parameter currently has no effect)</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                label
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-gray-500 font-semibold">default: "Examples"</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>the label to use for the examples component (by default, "Examples")</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                elem_id
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>an optional string that is assigned as the id of this component in the HTML DOM.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                run_on_click
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if cache_examples is False, clicking on an example does not run the function when an example is clicked. Set this to True to run the function when an example is clicked. Has no effect if cache_examples is True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                preprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, preprocesses the example input before running the prediction function and caching the output. Only applies if cache_examples is True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                postprocess
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: True</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>if True, postprocesses the example output after running the prediction function and before caching. Only applies if cache_examples is True.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                batch
              </code>
              <p class="text-gray-500 italic">bool</p>
              
              <p class="text-gray-500 font-semibold">default: False</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. Used only if cache_examples is True.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
   <h4 class="mt-4 mb-2 font-semibold">Step-by-step Guides</h4>
      
        <div class="guides-list grid grid-cols-1 lg:grid-cols-4 gap-4">
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/more_on_examples_and_flagging">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">More On Examples And Flagging</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/using_hugging_face_integrations">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Using Hugging Face Integrations</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_in_pytorch">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification In Pytorch</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_in_tensorflow">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification In Tensorflow</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/image_classification_with_vision_transformers">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Image Classification With Vision Transformers</p>
            </div>
          </a>
          
          <a class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow my-4 bg-gradient-to-r" target="_blank" href="/create_your_own_friends_with_a_gan">
            <div class="flex flex-col p-4 h-min">
              <p class="font-semibold group-hover:underline text-l">Create Your Own Friends With A Gan</p>
            </div>
          </a>
          
        </div>
      
  
</div>
          
        
      </section>
      <section id="update" class="pt-2 flex flex-col gap-10">
          <h3 class="text-3xl font-light my-4" id="update-section-header">Update</h3>
          <p class="mb-12 text-lg">When a function passed into a Gradio Interface or 
            a Blocks events returns a typical value, it updates the value of the 
            output component. But it is also possible to update the <em>properties</em> 
            of an output component (such as the number of lines of a `Textbox` or 
            the visibility of an `Image`) by returning the component's `update()` function, 
            which takes as parameters any of the constructor parameters for that component.
            Here's an example:
          </p>
          <div class="flex flex-col gap-10">
            
              <div class="obj" id="update">
  
  <div class="demo-window fixed hidden inset-0 bg-gray-500 bg-opacity-75 overflow-y-auto h-full w-full" style="z-index: 100">
    <div class="relative mx-auto my-auto p-5 border w-11/12 shadow-lg rounded-md bg-white overflow-auto" style="top: 5%; height: 90%">
      <div class="flex">
        
        <button 
          class="demo-btn selected-demo px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_essay"
          onclick="show_demo('update', 'blocks_essay')"

        >blocks_essay</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_update"
          onclick="show_demo('update', 'blocks_update')"

        >blocks_update</button>
        
        <button 
          class="demo-btn  px-4 py-2 text-lg text-gray-600 hover:text-orange-500" 
          name="blocks_essay_update"
          onclick="show_demo('update', 'blocks_essay_update')"

        >blocks_essay_update</button>
        
      </div>
      
      <div class="demo-content " name="blocks_essay">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr


def change_textbox(choice):
    if choice == "short":
        return gr.Textbox.update(lines=2, visible=True)
    elif choice == "long":
        return gr.Textbox.update(lines=8, visible=True)
    else:
        return gr.Textbox.update(visible=False)


with gr.Blocks() as demo:
    radio = gr.Radio(
        ["short", "long", "none"], label="What kind of essay would you like to write?"
    )
    text = gr.Textbox(lines=2, interactive=True)

    radio.change(fn=change_textbox, inputs=radio, outputs=text)

if __name__ == "__main__":
    demo.launch()
</code></pre></div>
        
          <gradio-app space="gradio/blocks_essay" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_update">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown(
        """
    # Animal Generator
    Once you select a species, the detail panel should be visible.
    """
    )

    species = gr.Radio(label="Animal Class", choices=["Mammal", "Fish", "Bird"])
    animal = gr.Dropdown(label="Animal", choices=[])

    with gr.Column(visible=False) as details_col:
        weight = gr.Slider(0, 20)
        details = gr.Textbox(label="Extra Details")
        generate_btn = gr.Button("Generate")
        output = gr.Textbox(label="Output")

    species_map = {
        "Mammal": ["Elephant", "Giraffe", "Hamster"],
        "Fish": ["Shark", "Salmon", "Tuna"],
        "Bird": ["Chicken", "Eagle", "Hawk"],
    }

    def filter_species(species):
        return gr.Dropdown.update(
            choices=species_map[species], value=species_map[species][1]
        ), gr.update(visible=True)

    species.change(filter_species, species, [animal, details_col])

    def filter_weight(animal):
        if animal in ("Elephant", "Shark", "Giraffe"):
            return gr.update(maximum=100)
        else:
            return gr.update(maximum=20)

    animal.change(filter_weight, animal, weight)
    weight.change(lambda w: gr.update(lines=int(w / 10) + 1), weight, details)

    generate_btn.click(lambda x: x, details, output)


if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/blocks_update" />      
        
      </div>
      
      <div class="demo-content hidden" name="blocks_essay_update">
        <div class="codeblock"><pre class=" max-h-80 overflow-auto"><code class="lang-python">import gradio as gr

def change_textbox(choice):
    if choice == "short":
        return gr.update(lines=2, visible=True, value="Short story: ")
    elif choice == "long":
        return gr.update(lines=8, visible=True, value="Long story...")
    else:
        return gr.update(visible=False)

with gr.Blocks() as demo:
    radio = gr.Radio(
        ["short", "long", "none"], label="Essay Length to Write?"
    )
    text = gr.Textbox(lines=2, interactive=True)
    radio.change(fn=change_textbox, inputs=radio, outputs=text)

if __name__ == "__main__":
    demo.launch()</code></pre></div>
        
          <gradio-app space="gradio/blocks_essay_update" />      
        
      </div>
      
    </div>
  </div>
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="update-header"
        class="text-3xl font-light py-4">update</h3>
    
    <button 
      class="h-2/4 rounded-full bg-orange-500 hover:bg-orange-400 transition-colors text-white py-1 px-3 my-3 mx-2 ml-auto"
      onclick="this.closest('.obj').querySelector('.demo-window').classList.remove('hidden')"
    >
      Try Examples
    </button>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>update(</span><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Updates component properties. This is a shorthand for using the update method on a component. For example, rather than using gr.Number.update(...) you can just use gr.update(...). Note that your editor's autocompletion will suggest proper parameters if you use the update method on the component. <br> <br></p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python"># Blocks Example
import gradio as gr
with gr.Blocks() as demo:
    radio = gr.Radio([1, 2, 4], label="Set the value of the number")
    number = gr.Number(value=2, interactive=True)
    radio.change(fn=lambda value: gr.update(value=value), inputs=radio, outputs=number)
demo.launch()
# Interface example
import gradio as gr
def change_textbox(choice):
  if choice == "short":
      return gr.Textbox.update(lines=2, visible=True)
  elif choice == "long":
      return gr.Textbox.update(lines=8, visible=True)
  else:
      return gr.Textbox.update(visible=False)
gr.Interface(
  change_textbox,
  gr.Radio(
      ["short", "long", "none"], label="What kind of essay would you like to write?"
  ),
  gr.Textbox(lines=2),
  live=True,
).launch()</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                kwargs
              </code>
              <p class="text-gray-500 italic"><class 'inspect._empty'></p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>Key-word arguments used to update the component's properties.</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
            
          </div>
        </section>
        <section id="routes" class="pt-2 flex flex-col gap-10">
          <div>
            <h2 id="routes-header"
                class="text-4xl font-light mb-2 pt-2 text-orange-500">Routes</h2>
            <p class="mt-8 text-lg">
              Gradio includes some helper functions for exposing and interacting with the FastAPI app
              used to run your demo.
            </p>
          </div>
          
          
            <div class="obj" id="mount_gradio_app">
  
  <div class="flex flex-row items-center justify-between">
    <h3 id="mount_gradio_app-header"
        class="text-3xl font-light py-4">mount_gradio_app</h3>
    
  </div>
  
  <div class="codeblock"><pre><code class="lang-python">gradio.<span>mount_gradio_app(</span><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--
  --><!--
--><!--  
-->···<span>)</span></code></pre></div>
  
  
  <p class="mt-8 mb-2 text-lg">Mount a gradio.Blocks to an existing FastAPI application. <br></p>
  <br>
  
  
  
    <h4 class="mt-4 p-3 font-semibold">Example Usage</h4>
    <div class="codeblock">
      <pre><code class="lang-python">from fastapi import FastAPI
import gradio as gr
app = FastAPI()
@app.get("/")
def read_main():
    return {"message": "This is your main app"}
io = gr.Interface(lambda x: "Hello, " + x + "!", "textbox", "textbox")
app = gr.mount_gradio_app(app, io, path="/gradio")
# Then run `uvicorn run:app` from the terminal and navigate to http://localhost:8000/gradio.</code></pre>
    </div>
  

  
  <table class="table-fixed w-full mt-6 leading-loose">
    <thead class="text-left">
      <tr>
        <th class="p-3 font-semibold w-2/5">Parameter</th>
        <th class="p-3 font-semibold">Description</th>
      </tr>
    </thead>
    <tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                app
              </code>
              <p class="text-gray-500 italic">fastapi.FastAPI</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The parent FastAPI application.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                blocks
              </code>
              <p class="text-gray-500 italic">gradio.Blocks</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The blocks object we want to mount to the parent app.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                path
              </code>
              <p class="text-gray-500 italic">str</p>
              
              <p class="text-orange-600 font-semibold italic">required</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The path at which the gradio application will be mounted.</p>
            </td>
          </tr>
        
      
        
          <tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
            <td class="p-3 w-2/5">
              <code class="block">
                gradio_api_url
              </code>
              <p class="text-gray-500 italic">Optional[str]</p>
              
              <p class="text-gray-500 font-semibold">default: None</p>
              
            </td>
            <td class="p-3 text-gray-700">
              <p>The full url at which the gradio app will run. This is only needed if deploying to Huggingface spaces of if the websocket endpoints of your deployed app are on a different network location than the gradio app. If deploying to spaces, set gradio_api_url to 'http://localhost:7860/'</p>
            </td>
          </tr>
        
      
    </tbody>
  </table>
  
  
  
  
  
</div>
          
        
        </section>
    </div>
  </main>


    <script src="/assets/prism.js"></script>
    <script>
      window.__gradio_mode__ = "website";
    </script>
    
    
    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/3.9/gradio.js"></script>
    
  

    <footer class="container mx-auto flex-row flex items-center px-4 py-6 justify-between">
  <a href="/">
    <svg width="90"
         viewBox="0 0 451 105"
         fill="none"
         xmlns="http://www.w3.org/2000/svg">
      <path d="M45.7779 9.7789L91.2031 34.6919V49.2071L45.7779 24.2941V9.7789Z" fill="#FF7C00" fill-opacity="0.75" />
      <path d="M91.1878 34.6924L45.5957 59.6992V74.3078L91.1878 49.301V34.6924Z" fill="#FF7C00" />
      <path d="M-0.000525172 34.6924L45.5957 59.6992V74.3079L-0.000525172 49.3011V34.6924Z" fill="#FF7C00"
      fill-opacity="0.75" />
      <path d="M45.7731 9.68544L0.00585938 34.6919V49.3006L45.7731 24.2942V9.68544Z" fill="#FF7C00" />
      <path d="M45.7779 34.9728L91.2031 59.8857V74.4009L45.7779 49.488V34.9728Z" fill="#FF7C00" fill-opacity="0.75" />
      <path d="M91.1878 59.8853L45.5957 84.8921V99.5007L91.1878 74.4939V59.8853Z" fill="#FF7C00" />
      <path d="M-0.000525172 59.8853L45.5957 84.8921V99.5008L-0.000525172 74.494V59.8853Z" fill="#FF7C00"
      fill-opacity="0.75" />
      <path d="M45.7731 34.8783L0.00585938 59.8848V74.4935L45.7731 49.4871V34.8783Z" fill="#FF7C00" />
      <path
      d="M139.727 96.9891L148.148 86.596C152.803 90.8598 157.991 92.9917 163.711 92.9917C167.549 92.9917 170.711 92.4232 173.198 91.2862C175.686 90.1492 176.929 88.5858 176.929 86.596C176.929 83.2205 174.176 81.5327 168.668 81.5327C167.176 81.5327 164.955 81.7104 162.006 82.0657C159.057 82.421 156.836 82.5987 155.344 82.5987C146.176 82.5987 141.593 79.312 141.593 72.7386C141.593 70.8554 142.357 69.0077 143.885 67.1956C145.413 65.3835 147.189 64.0511 149.214 63.1983C142.712 58.97 139.461 52.9829 139.461 45.237C139.461 39.1255 141.699 34.08 146.176 30.1004C150.653 26.0853 156.161 24.0777 162.699 24.0777C167.815 24.0777 172.097 25.0371 175.544 26.9558L180.767 20.8799L189.987 29.2476L183.645 33.8845C185.848 37.2245 186.949 41.1686 186.949 45.7166C186.949 52.219 184.959 57.4244 180.98 61.3329C177.036 65.2058 172.044 67.1423 166.003 67.1423C165.044 67.1423 163.765 67.0535 162.166 66.8758L159.981 66.5561C159.732 66.5561 158.772 66.9469 157.102 67.7286C155.468 68.4748 154.651 69.2565 154.651 70.0737C154.651 71.495 155.877 72.2056 158.328 72.2056C159.43 72.2056 161.277 71.9391 163.871 71.4062C166.465 70.8732 168.686 70.6067 170.534 70.6067C183.503 70.6067 189.987 75.8121 189.987 86.2229C189.987 91.9791 187.393 96.4916 182.206 99.7606C177.018 103.065 170.764 104.717 163.445 104.717C154.704 104.717 146.798 102.141 139.727 96.9891ZM153.052 45.2903C153.052 48.6658 153.976 51.384 155.823 53.4448C157.707 55.4701 160.229 56.4828 163.392 56.4828C166.554 56.4828 168.988 55.4879 170.693 53.4981C172.399 51.5083 173.252 48.7724 173.252 45.2903C173.252 42.4122 172.328 39.9782 170.48 37.9885C168.668 35.9987 166.305 35.0038 163.392 35.0038C160.336 35.0038 157.849 35.9631 155.93 37.8819C154.011 39.8006 153.052 42.27 153.052 45.2903Z"
      fill="#FF7C00" />
      <path
      d="M231.773 37.6687C229.392 36.1053 226.78 35.3236 223.938 35.3236C220.847 35.3236 218.093 36.7271 215.677 39.5341C213.296 42.3411 212.106 45.7699 212.106 49.8206V82.3322H198.781V25.2503H212.106V30.4735C215.837 26.2807 220.793 24.1843 226.976 24.1843C231.524 24.1843 235.006 24.8772 237.422 26.263L231.773 37.6687Z"
      fill="#FF7C00" />
      <path
      d="M277.236 76.6293C276.028 78.6191 273.913 80.2536 270.893 81.5327C267.909 82.7763 264.782 83.3981 261.513 83.3981C255.366 83.3981 250.533 81.8703 247.016 78.8145C243.498 75.7233 241.739 71.3529 241.739 65.7033C241.739 59.0944 244.209 53.9245 249.148 50.1936C254.122 46.4628 261.175 44.5974 270.307 44.5974C271.87 44.5974 273.718 44.8639 275.85 45.3968C275.85 38.6813 271.604 35.3236 263.112 35.3236C258.102 35.3236 253.909 36.1586 250.533 37.8286L247.655 27.4888C252.239 25.2858 257.693 24.1843 264.018 24.1843C272.723 24.1843 279.101 26.1741 283.152 30.1537C287.202 34.0977 289.228 41.5949 289.228 52.6453V64.8505C289.228 72.4543 290.756 77.2334 293.811 79.1876C292.71 81.1063 291.484 82.2789 290.134 82.7053C288.783 83.1672 287.238 83.3981 285.497 83.3981C283.578 83.3981 281.855 82.6875 280.327 81.2662C278.799 79.845 277.769 78.2993 277.236 76.6293ZM275.956 55.4701C273.682 55.0082 271.977 54.7773 270.84 54.7773C260.322 54.7773 255.064 58.2238 255.064 65.117C255.064 70.2336 258.031 72.7919 263.965 72.7919C271.959 72.7919 275.956 68.7946 275.956 60.7999V55.4701Z"
      fill="#FF7C00" />
      <path
      d="M340.393 82.3322V78.8678C339.292 80.0759 337.427 81.1419 334.797 82.0657C332.168 82.954 329.45 83.3981 326.643 83.3981C318.684 83.3981 312.412 80.8754 307.829 75.8299C303.28 70.7843 301.006 63.749 301.006 54.724C301.006 45.6989 303.618 38.3615 308.841 32.712C314.1 27.0269 320.673 24.1843 328.561 24.1843C332.896 24.1843 336.84 25.0726 340.393 26.8492V3.98449L353.718 0.786621V82.3322H340.393ZM340.393 38.8945C337.551 36.6205 334.584 35.4835 331.493 35.4835C326.163 35.4835 322.059 37.1179 319.181 40.3869C316.303 43.6203 314.864 48.2749 314.864 54.3509C314.864 66.2185 320.584 72.1523 332.026 72.1523C333.305 72.1523 334.868 71.7792 336.716 71.0331C338.599 70.2514 339.825 69.4697 340.393 68.688V38.8945Z"
      fill="#FF7C00" />
      <path
      d="M377.542 3.13172C379.674 3.13172 381.486 3.89566 382.978 5.42353C384.506 6.91586 385.27 8.72799 385.27 10.8599C385.27 12.9918 384.506 14.8217 382.978 16.3496C381.486 17.8419 379.674 18.5881 377.542 18.5881C375.41 18.5881 373.58 17.8419 372.052 16.3496C370.56 14.8217 369.814 12.9918 369.814 10.8599C369.814 8.72799 370.56 6.91586 372.052 5.42353C373.58 3.89566 375.41 3.13172 377.542 3.13172ZM370.667 82.3322V36.1763H363.365V25.2503H384.151V82.3322H370.667Z"
      fill="#FF7C00" />
      <path
      d="M395.983 53.658C395.983 44.9527 398.488 37.8641 403.498 32.3922C408.544 26.9203 415.188 24.1843 423.431 24.1843C432.101 24.1843 438.834 26.8137 443.631 32.0724C448.428 37.3311 450.826 44.5263 450.826 53.658C450.826 62.7541 448.375 69.9849 443.471 75.3502C438.603 80.7155 431.924 83.3981 423.431 83.3981C414.762 83.3981 408.011 80.6977 403.178 75.2969C398.381 69.8605 395.983 62.6476 395.983 53.658ZM409.84 53.658C409.84 66.2363 414.371 72.5254 423.431 72.5254C427.589 72.5254 430.875 70.8909 433.291 67.622C435.743 64.3531 436.969 59.6984 436.969 53.658C436.969 41.2574 432.456 35.0571 423.431 35.0571C419.274 35.0571 415.97 36.6915 413.518 39.9605C411.066 43.2294 409.84 47.7952 409.84 53.658Z"
      fill="#FF7C00" />
    </svg>
  </a>
  <div class="flex gap-3">
    <a class="hover:opacity-75 transition" href="https://twitter.com/Gradio">
      <img src="/assets/img/twitter.svg" class="w-6">
    </a>
    <a class="hover:opacity-75 transition"
       href="https://github.com/gradio-app/gradio">
      <img src="/assets/img/github.svg" class="w-6">
    </a>
  </div>
</footer>
    <script>const COLOR_SETS = [
    ["from-green-100", "to-green-50"],
    ["from-yellow-100", "to-yellow-50"],
    ["from-red-100", "to-red-50"],
    ["from-blue-100", "to-blue-50"],
    ["from-pink-100", "to-pink-50"],
    ["from-purple-100", "to-purple-50"],
]
document.querySelectorAll(".guide-box").forEach(guide => {
    const [start_color, end_color] = COLOR_SETS[Math.floor(Math.random() * COLOR_SETS.length)]
    guide.classList.add(start_color);
    guide.classList.add(end_color);
})</script>
    <script>// adds anchor button when hovering over headers, except on touch devices where instead the header becomes a link

function createAnchorTag(link) {
        let a = document.createElement('a');
        a.href = link;
        a.classList.add("invisible", "group-hover-visible");
        let img = document.createElement('img');
        img.classList.add("anchor-img")
        img.src = "/assets/img/anchor.svg";
        a.appendChild(img);
        return a;
    }
function createMobileAnchorTag(link) {
        let a = document.createElement('a');
        a.href = link;
        a.classList.add("no-underline")
        return a;
    }

var headers = document.querySelectorAll("h2, h3");

function isTouchDevice() {
        return (('ontouchstart' in window) ||
           (navigator.maxTouchPoints > 0) ||
           (navigator.msMaxTouchPoints > 0));
      }

if (isTouchDevice()) {
      for (let i = 0; i < headers.length; i++) {
            let link = '#' + headers[i].id;
            var wrapper = createMobileAnchorTag(link);
            headers[i].replaceWith(wrapper);
            wrapper.appendChild(headers[i]);
      }
} else {
      for (let i = 0; i < headers.length; i++) {
        headers[i].classList.add("group")
        let link = '#' + headers[i].id;
        var anchorTag = createAnchorTag(link);
        headers[i].appendChild(createAnchorTag(link));
      }
}</script>
    <script>// add copy buttons to all codeblocks

const svgCopy =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
const svgCheck =
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(255, 124, 1)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';


const addCopyButtons = (clipboard) => {
  document.querySelectorAll("pre > code").forEach((codeBlock) => {
  const button = document.createElement("button");
  button.classList.add("clipboard-button");
  button.type = "button";
  button.innerHTML = svgCopy;
  button.addEventListener("click", () => {
    clipboard.writeText(codeBlock.innerText).then(
      () => {
        button.blur();
        button.innerHTML = svgCheck;
        setTimeout(() => (button.innerHTML = svgCopy), 2000);
      },
      (error) => (button.innerHTML = "Error")
    );
  });
  const pre = codeBlock.parentNode;
  pre.parentNode.insertBefore(button, pre);
});
};

if (navigator && navigator.clipboard) {
addCopyButtons(navigator.clipboard);
};</script>

    <script>
    const show_demo = (component, demo) => {
      document.querySelectorAll(`#${component} .demo-btn.selected-demo`).forEach(n => n.classList.remove('selected-demo'));
      document.querySelectorAll(`#${component} .demo-content`).forEach(n => n.classList.add('hidden'));
      document.querySelector(`#${component} .demo-btn[name=${demo}]`).classList.add('selected-demo');
      document.querySelectorAll(`#${component} .demo-content[name=${demo}]`).forEach(n => n.classList.remove('hidden'));
    }
    window.onclick = function(event) {
      if (event.target.classList.contains('demo-window')) {
        document.querySelectorAll('.demo-window').forEach(n => n.classList.add('hidden'));
      }
    }

    let mainNavLinks = document.querySelectorAll(".navigation a");
    window.addEventListener("scroll", event => {
      let fromTop = window.scrollY;
      mainNavLinks.forEach(link => {
        let section = document.querySelector(link.hash);
        if (
          section.offsetTop <= fromTop*1.01 &&
          section.offsetTop + section.offsetHeight > fromTop*1.01
        ) {
          link.classList.add("current-nav-link");
        } else {
          link.classList.remove("current-nav-link");
        }
      });
    });

    let mainNavSubLinks = document.querySelectorAll(".navigation .sub-links");

    window.addEventListener("scroll", event => {
      let fromTop = window.scrollY;
      mainNavSubLinks.forEach(subLinkDiv => {
        let hash = subLinkDiv.getAttribute('hash');
        let section = document.querySelector(hash);

        if (
          section.offsetTop <= fromTop*1.01 &&
          section.offsetTop + section.offsetHeight > fromTop*1.01
        ) {
          subLinkDiv.classList.remove("hidden");
        } else {
          if (document.querySelector("#search").value.length == 0) {
            subLinkDiv.classList.add("hidden");
          }
        }
      });
    });

    const search = query => {
      if (query.length > 0) {
        query = query.toLowerCase();

        mainNavSubLinks.forEach(subLinkDiv => { subLinkDiv.classList.remove("hidden"); })

        var filtered_links = Array.from(mainNavLinks).filter(link => link.hash.toLowerCase().includes(query))
        filtered_include_parent = Array.from(filtered_links);

        filtered_links.forEach(link => {
          if (link.parentElement.classList.contains("sub-links")) {
            let id = link.parentElement.getAttribute('hash');
            mainNavLinks.forEach(mainLink => {
              if (mainLink.hash == id) {
                filtered_include_parent.push(mainLink);
              }
            });
        };
        })
      } else {

        mainNavSubLinks.forEach(subLinkDiv => { subLinkDiv.classList.add("hidden"); })

        var filtered_include_parent = Array.from(mainNavLinks);
      }

      mainNavLinks.forEach(link => {
        if (filtered_include_parent.includes(link)) {
          link.classList.remove("hidden");
        } else {
          link.classList.add("hidden");
        }
      })
      }

      document.addEventListener('keydown', function (e) {
        if (e.key.toLowerCase() === 'k' && (e.metaKey || e.ctrlKey)) {
            e.preventDefault();
            document.getElementById('search').focus();
        }
        if (e.key == 'Escape') {
            document.getElementById('search').value = '';
            document.getElementById('search').blur();
            search('');
        }
      })

    function removeFooters() {
      document.querySelectorAll('.embedded-component gradio-app').forEach(g => {
          if ( g.shadowRoot ) {
            let shadowroot = g.shadowRoot;
            let f = shadowroot.querySelector('footer');
            if (f != null) {
              f.classList.add('hidden');
              let c = shadowroot.querySelector('.gradio-container');
              c.style.removeProperty('min-height');
            } else {
              window.setTimeout(removeFooters, 100);
            }
          } else {
            window.setTimeout(removeFooters, 100);
          }
          
        });
      };
   
    window.addEventListener('load', removeFooters());

  </script>
  </body>
</html>